css超出隐藏省略css多行文本超出省略号

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;

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

0

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录