设置CSS省略号

一、单行文本省略号

• 语法：text-overflow: clip|ellipsis|string; 默认值为clip
• 参数：clip修剪文本 | ellipsis显示省略符号来代表被修剪的文本 | string使用给定的字符串来代表被修剪的文本

.lhh-single-line{
    overflow: hidden; //隐藏溢出文本
    white-space: nowrap; //文本不会换行，直到遇到 <br> 标签为止。
    text-overflow: ellipsis; //文本溢出显示省略符号...
}

二、多行文本省略号：兼容ie8及以上

• 该方法适用范围广，省略号需要结合js控制。
• 将height设置为line-height的整数倍，防止超出的文本显示。
• 给:after添加渐变背景优化显示效果。

// html
<div class="block lhh-multi-line">多行文本省略号</div>

// css
.block{
    line-height: 20px; 
    max-height: 40px;
}
.lhh-multi-line{
    position: relative; 
    overflow: hidden;
}
.lhh-multi-line:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}