广告位招租 qq245909083

CSS强制文字不换行,溢出部分隐藏并在末尾加省略号

分享时间:2019-10-11 346 热度℃
有时我们在开发时希望标题长度太长了就自动加上省略号了,这样只是用户看不到但搜索引擎还是可以看到,所以这样做对优化是有好处的,下面我来介绍文字溢出省略号实现方法。

例,原本以为文字溢出的处理比较复杂,没想到这么一简简单单的一句话就搞定了,CSS真是神奇:

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

white-space:nowrap; 表示文本不会换行,在同一行继续,知道遇到
标签为止;
overflow:hidden; 不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
text-overflow:ellipsis; 当文本对象溢出是显示...,当然也可是设置属性为clip不显示点点点。

text-overflow属性比较特殊,在现在的CSS手册中找不到,但CSS3中有相关的描述:text-overflow-mode。
它有三个值:clip、ellipsis、ellipsis-word。
clip : 不显示省略标记(…),只是简单的裁切;
ellipsis : 当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个字符。
ellipsis-word : 当对象内文本溢出时显示省略标记(…),省略标记插入的位置是最后一个词(word)。

text-overflow比较特殊,它不能单独起作用,而是必须跟在overflow:hidden后面作为补充说明使用。如果我们要给一个段落添加这个效果,那么可以写:

p {
white-space: nowrap;
width: 100%; /* IE6 需要定义宽度 */
overflow: hidden;
-o-text-overflow: ellipsis; /* Opera */
text-overflow: ellipsis; /* IE, Safari (WebKit) */
}

Firefox7.0开始兼容text-overflow:ellipsis;这样的话,以后的省略号就可以做到浏览器兼容了,代码片段为:
width:200px;/*设置宽度*/
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
overflow: hidden;/*设置超过的隐藏*/
返回顶部