关于文本超出省略

　　单行文字很简单只需text-overflow: ellipsis即可

代码如下:

.box{
     height:20px;
    width:100px;
    line-height:20px;
    text-overflow:ellipsis;
    white-space:no-wrap;
    overflow:hidden;
}
    

　　多行文本可以用-webkit-line-clamp属性,这个属性pc上高版本浏览器 应该都兼容(主要做移动端不清楚)并且需要配合其他伸缩盒子属性

　　display:-webkit-box:弹性盒子

　　-webkit-box-orient:弹性盒子的排列方式

　　-webkit-line-clamp:数字 显示的行数;

代码如下:

　　

 .box{
        height:40px;
        line-height:20px;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        overflow:hidden;
        -webkit-line-clamp:2;
        text-overflow: ellipsis;
    
}

转载于:https://www.cnblogs.com/itchenpeng/p/5461777.html