CSS——有趣的样式属性（文本截断）

文本截断

    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);
}