CSS 设置栏目文字不换行，超出部分显示省略号

Devops海洋的渔夫

发布于 2019-05-31 16:30:06

3.4K0

发布于 2019-05-31 16:30:06

文章被收录于专栏：Devops专栏

文字换行情况

有些时候，在显示文字内容的地方并不像换行，而是想将溢出的部分省略号显示。

设置文件不行号，超出范围显示省略号的样式

强制文字不换行 white-space: nowrap;

设置文字超出为省略号显示 text-overflow: ellipsis;

但是单纯设置这个text-overflow: ellipsis;是无法显示省略号的。需要结合设置宽度的限制以及overflow:hidden来使用。

    <style>
        div{
            width: 150px;
            height: 100px;
            border:1px solid #000;

        }

        p{
            overflow: hidden;

            /* 强制文字不换行 */
            white-space: nowrap;

            /* 超出部分显示省略号 */
            text-overflow: ellipsis;
        }

    </style>