做前端设计时，通常需要控制字符显示的宽度或者行数，多余字符通常以“...”替代；本文分两点情况来进行设置：

 

　　1、需要字符保持固定宽度，其余字符显示省略号(‘...’);

 

　　1.addclass{

 

　　2width:600px;

 

　　3overflow:hidden;//这个是设置隐藏的。还有其他的，例如scroll，是超出固定长度，底部显示滚动条的。

 

　　4text-overflow:ellipsis;//这个就是设置直接隐藏掉文字，还是显示...的。当前是显示省略号。直接省略是clip

 

　　5display:inline-block;//根据不同标签display值，有的不用加。

 

　　6}

 

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

 

　　.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;

 

　　}

 

　　本文完结，希望可以帮助到大家！