仅供学习，转载请注明出处

文字换行情况

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

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

强制文字不换行 ​​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>

 微信公众号