1. 单行省略号
实现单行文本的溢出显示省略号用text-overflow:ellipsis属性实现,需要添加width属性
.textEllipsis{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
2. 多行省略号
多行文本溢出显示省略号
WebKit浏览器或移动端的页面
.textEllipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*显示的行数*/
overflow: hidden;
word-break:break-all; /*可择*/
}
word-break:break-all;正如其名字,所有的都换行。毫不留情,一点空隙都不放过。
非WebKit浏览器
.textEllipsis {
position: relative;
line-height: 20px;
height: 60px; /*height高度正好是line-height的n倍*/
overflow: hidden;
border: #5D5D5D solid 1px;
word-break: break-all;
}
.textEllipsis::after {
content: "…";
position: absolute;
bottom: 0;
right: 0;
width: 17px;
padding-left: 33px;
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%);
}
但文字未超出行的情况下也会出现省略号,可结合js优化该方法(这里涉及到中英文的字体宽度等问题,故比较麻烦)
使用一些js库来处理省略号是比较好的选择
如:
1.Clamp.js 下载及文档地址:https://github.com/josephschmitt/Clamp.js 使用也非常简单:
var module = document.getElementById('clamp-this-module');
$clamp(module,{clamp:3});
2.jQuery插件-jQuery.dotdotdot 这个使用起来也很方便:
$(document).ready(function(){
$('#wrapper').dotdotdot({
//
});
});