[分享]css中字体不换行省略号

CSS中的字体不换行省略号是使长字符串的文字在一定宽度内显示，以免破坏整个布局效果，能够提高页面的视觉美感。 .text { overflow: hidden; textoverflow: ellip...

CSS中的字体不换行省略号是使长字符串的文字在一定宽度内显示，以免破坏整个布局效果，能够提高页面的视觉美感。

 .text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } 

上述代码是设定文字行为的CSS属性，其中：

• overflow: hidden; 表示将超出元素范围的内容隐藏，避免出现滚动条或其他麻烦。
• text-overflow: ellipsis; 表示将文字超出的部分换成省略号（...）。
• white-space: nowrap; 表示让文字在一行中显示，不换行。

使用这些属性，在需要显示省略号的元素上，添加样式就可以了:

 <p class="text">这是一段很长很长很长的文字，要在一定宽度内显示，显示不下就用省略号表示</p> 

当设定文字行为的属性在元素上起作用时，即文字内容超出元素宽度时，省略号就会按照我们设定的样式显示。

总结起来，CSS中的字体不换行省略号能够使长文字在一定宽度内显示，美化页面布局。