标题超过长度就显示省略号-CSS代码来解决

当一条信息的字数超过了容器的长度后，该怎么显示呢？一般来说，这样的信息是文章的标题，新闻列表一般对宽度是有限制的，一般的宽度也有200PX左右吧。一般超过之后我们就希望显示省略号，问题是：该怎么显示才好呢？我们可以写一个函数然后将多余的字符用“...”代替，但是这样也有不好的地方，那就是：事实上还是控制不好的。当你用left()函数的时候，它读取的长度不一定相同，因为标题里面可能带数字和英文。并且，这样的标题对于蜘蛛来说，是没办法看到全部的。

 

一个好的方法是用CSS来控制容器，当标题的长度大于容器的长度时，我们可以用text-overflow来生成“...”而不是简单的截取。

 

text-overflow的定义是:

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

 

clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

 

所以，你可以用它来生成“...”而不是用函数，用该CSS对于蜘蛛来说，截取的部分依然是可见的（只是没有显现）。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的。

 

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

 

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

 

p {
white-space: nowrap;
width: 100%; 
overflow: hidden; 
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

 

这样就达到了想要的结果。