CSS 设置栏目文字不换行，超出部分显示省略号-CFANZ编程社区

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

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

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

文字换行情况

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

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

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

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

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

设置文字超出为省略号显示 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>