文本溢出显示省略号

一、单行文本溢出

width: 300px;/*前提要设置宽度*/
overflow: hidden;/*超出隐藏*/
text-overflow: ellipsis;/*省略号*/
white-space: nowrap;/*不换行*/

二、多行文本溢出

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

p {
    width: 300px;/*可选*/
    position: relative;
    line-height: 20px;
    height: 60px;/*显示3行*/
    overflow: hidden;
    padding: 2px 10px;
}
p::after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
}

需要注意的几点：

• 利用height和line-height的倍数关系调整需要显示的行数，防止超出的文字露出。
• 给p::after添加渐变背景可避免文字只显示一半。
• IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
• 要支持IE8，需要将::after替换成:after。

方法二：利用WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

需要注意：

• display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。
• -webkit-line-clamp; 用来限制在一个块元素显示的文本的行数。
• -webkit-box-orient; 设置或检索伸缩盒对象的子元素的排列方式。

方法三：使用JavaScript。

$(".class").each(function(){
  //设置显示获取字符串的字数
  var maxwidth=280;   
  if($(this).text().length>maxwidth){
     //截取字符串
     $(this).text($(this).text().substring(0,maxwidth));
     //多余的用省略号显示
     $(this).html($(this).html()+"...");
   }
});

参考文章链接:http://caibaojian.com/multili...