DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇

有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号(...)显示，这个时候我们可以使用CSS text-overflow文本溢出省略号属性样式实现。

text-overflow省略号样式语法结构

text-overflow语法：

text-overflow : clip | ellipsis

text-overflow参数值和解释：

clip : 　不显示省略标记(...)，而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记(...)

text-overflow应用说明：

CSS text-overflow设置或检索是否使用一个省略号标记(...)标示对象内文本文字的溢出。

要想实现显示不完内容将显示省略号代替，还需要html nobr标签完成(nobr禁止换行标签)

width: 290px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

实测，在自适应的情况下是不需要设置宽度的，会根据框架的宽度自动隐藏内容!

打 赏