CSS设置多余文字自动省略

在写界面的过程中，常用到文字排版的问题，多余文字需要自动省略为”.....“，这里分享一个自己用到的方法，效果如下图：

 

 

 使用方法：

在需要省略的文字css样式中写入如下代码即可：

display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
overflow-y: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;  /*设置需要显示的文字行数*/
line-clamp: 1; /*设置需要显示的文字行数*/

 使用示例：

<div class="mytext">这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字这里是测试文字</div>

.mytext{
    width: 50px;
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    overflow-y: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;/*设置 需要显示的行数*/
    line-clamp: 2;
    /*设置 需要显示的行数*/
}