一、单行文本溢出省略
.title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;/* for Opera */
}
二、多行文
本溢出省略
1、适用于
WebKit浏览器及移动端;
.title-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;/*显示的行数*/
overflow: hidden;
}
2、兼容各版本浏览器
我这里以两行为例,该方法基本兼容市场上面所有主流浏览器。
<div class="title-2">
<span>css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略css多行省略</span>
</div>
.title-2{
overflow: hidden;
height: 40px;
line-height: 20px;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;/*显示的行数*/
}
.title-2-text:after{
content: "..."; position: absolute; bottom: 0; right: 15px; padding-left: 20px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
/*我在Safari上测试时发现透明到白色中间会有一个黑色的过渡后来我就写成-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,1) 55%)*/
background: -o-linear-gradient(left, transparent, #fff 55%);
background: -moz-linear-gradient(left, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
首先先对当前浏览器进行判断是否为webkit内核,如果不是再使用js对当前页面所有需要多行省略的dom进行遍历并添加class:title-2-text。(主要是利用文本的高度进行判断,当高度超出父元素的高度时添加class)
if(navigator.userAgent.indexOf('AppleWebKit')==-1){//判断当前浏览器不是webkit内核
$(".title-2").each(function(){
if(parseFloat($(this).children("span").css("height"))>parseFloat($(this).css("height"))){
$(this).addClass("title-2-text");
}
});
}
效果图如下所示: