css3属性text-overflow：ellipsis的用法与注意之处

1.单行文本

text-overflow：clip | ellipsis

默认值：clip

适用于：所有元素

clip：当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。

ellipsis：当对象内文本溢出时显示省略标记（...）。

当值为ellipsis，有时不会出现（...），这是因为使用ellipsis的时候必须配合overflow：hidden；white-space：nowrap；（文本不换行）width：长度（实际值），这三个样式共同使用才有效果。

2.多行文本显示省略号

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
width:250px;
border:1px solid red;
font-size:30px;

因为使用了webkit的css扩展属性，该方法适用于webkit浏览器级移动端；

注：

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

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

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

适用范围：

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

注：

1.将height设置为line-height的整数倍，防止超出文字露出；

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

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

兼容性适用的方法：

注：这个方法需要根据字体的大小，设置的宽度去调整，虽然兼容，但是有些麻烦，但是可以实现在最后一排在中间位置显示省略号