设置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%);
}