文本截断
test-overflow 当文本溢出,使用 test-overflow:ellipsis;可以实现文本截断,浏览器兼容性好,但是只支持单行文本截断
div{
white-space: nowrap;/*设置文本不换行*/
overflow: hidden; /*设置容器超出隐藏*/
text-overflow: ellipsis;/*设置单行文本截断*/
}
如果要实现多行文本截断,可以使用 -webkit-line-clamp 属性实现,缺点是兼容性不好,可以使用在移动端,因为移动端的浏览器多是基于webkit内核
div{
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 3; /*设置显示行数*/
overflow: hidden;/*结合-webkit-line-clamp属性,超出行数时隐藏*/
-webkit-box-orient:vertical;/*设置伸缩盒子的排列方式*/
}
设置相对定位的容器高度,用包含省略号(_)的元素模拟实现,原理是通过伪元素绝对定位到行尾并遮住文字,再通过overflow:hidden隐藏多余的文字,这种方法只适合文本一定会超出容器的情景
div {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
word-break: break-all;
}
div::after{
content: '...';
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
/*设置背景渐变盖住省略号的文字*/
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}
使用float原理可以巧妙的实现多行文本截断效果,原理是当右浮动的容器高度高于左浮动的容器时,右浮动下面的右浮动容器会挤压到左浮动的容器下(在文本中,使用伪元素代替左浮动以及右浮动下买了的),可以实现响应式截断,文本超出容器才显示省略号,否则隐藏
.container{
height: 40px;
line-height: 20px;
overflow: hidden;
}
.container .text{
float: right;
margin-left: -8px;
width: 100%;
word-break: break-all;
}
.container::before{
float: left;
width: 5px;
content: '';
height: 40px;
background-color: red;
}
.container::after{
float: right;
content: '...';
height: 20px;
line-height: 20px;
/*为省略号的宽度*/
width: 2em;
/*使盒子不占位置*/
margin-left: -2em;
/*时盒子可以移动*/
position: relative;
left: 100%;
top: -20px;
padding-left: 8px;
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(white),color-stop(30%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 30%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 30%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 30%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 30%,white);
}