CSS限制文本长度，运用text-overflow

页面显示一段文字的时候，我们不希望他换行，又不想让他超出一定长度的时候，我们经常会在后台将过长的文字截取前面一段，然后在后面加上"..."。然而这样做，搜索引擎就搜索不到那段被截掉的文字了。有些人使用JS来实现同样的效果，将多余的文字截取，这样做成本太高。其实CSS就又这样的功能。只要很简单的代码，就可以在几乎所有浏览器下使用。当然在IE下更简单。

.txt{
overflow:hidden;//隐藏多余的文字
white-space:nowrap;//保证文字不换行
text-overflow:ellipsis;//文字后加"..." clip表示什么都不加
width:60%;//宽度，也可以用PX,不过用百分比的话，容易看出效果。
}

只要在div 的class上设置改类就行了，这个类只能在IE中使用，其实其他FF，opera也有自己的解决方法，下面是同样的类：

.txt{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;          /* for IE */
-o-text-overflow: ellipsis;      /* for Opera */
-icab-text-overflow: ellipsis;   /* for iCab */
-khtml-text-overflow: ellipsis;  /* for Konqueror Safari */
-moz-text-overflow: ellipsis;    /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
width:60%
}

基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。

对于FF也可以使用这个:

.txt:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */

这样使用的时候就可以放心使用了。

因为这是CSS3标准，很多浏览器还不支持，了解更多请去CSS3.INFO