CSS实现单行、多行文本超出后截取，并追加省略号，防止溢出

我们在网页调用文本内容时，如果文字超出了容器的宽度，会被换行，这个是我们常常会遇到的，但有些时候我们是不想换行显示的。

例如下面这样：

这里可以在生成页面是限制字符数量，也可以通过css的方式自动截取文字的显示，并在后部追加省略号，这是比较简单的实现方式，对seo的效果也比较好。

下面我们来看看具体的实现方式：

一、单行文字的css实现方式

这段css中，white-space: nowrap;的意思是文字强制不换行，这里边有一点需要注意，就是容器一定要指定宽度。

下面是使用后的效果

二、多行文字的实现

使用后的效果

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 

注： 

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： 

2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 

3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 

完整css：

适用范围：

该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

1.将height设置为line-height的整数倍，防止超出的文字露出一部分，导致不美观。

2.给p::after添加渐变背景可避免文字只显示一半。

3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。