超过固定宽度或行数显示“...”

　　作前端设计时，一般须要控制字符显示的宽度或者行数，多余字符一般以“...”替代；本文分两点状况来进行设置：

　　一、须要字符保持固定宽度，其他字符显示省略号(‘...’);

　　

1 .addclass{
2     width: 600px;
3     overflow: hidden;       //这个是设置隐藏的。还有其余的，例如scroll，是超出固定长度，底部显示滚动条的。
4     text-overflow: ellipsis;   //这个就是设置直接隐藏掉文字，仍是显示...的。当前是显示省略号。直接省略是clip
5     display: inline-block;     //根据不一样标签display值，有的不用加。
6 }

　　二、须要字符显示固定行数（本文以三行为例），其他字符显示省略号(‘...’);

.addclass{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;  //这里就是设置超出几行隐藏
    -webkit-box-orient: vertical;
    display:-webkit-box;  //根据不一样标签display，有的不用加
}

　　以上方法基本能够知足需求。当使用第二种状况(多行隐藏)时，有童鞋遇到过设置不生效，参考以下方法：

　　（1）于页面标签添加style="display:-webkit-box;"便可；（通常状况都是-webkit-box-orient，这个属性未生效）

　　（2）若是方法（1）不生效，尝试如下方法,(具体实现原理请移步：https://github.com/postcss/autoprefixer/issues/776)：

.addclass{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    /* autoprefixer: off */     //加这两个注释就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box; 
}

　　本文完结，但愿能够帮助到你们！