單行

.class1{    width: 200px;    text-overflow: ellipsis;     overflow: hidden;  /** 隱藏超出的內容 **/    } 

如果文本是英文的話，上面的CSS就可以了。如果文本是中文的話還要加上white-space:nowrap;規(guī)定文本不自動換行。

這個也是我測試的時候偶然發(fā)現的。。

多行

.class2{   width: 200px;   Word-break: break-all; /**換行**/   text-overflow: ellipsis; /**超出部分省略號**/   display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/   -webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/   -webkit-line-clamp: 3; /** 顯示的行數 **/   overflow: hidden;  /** 隱藏超出的內容 **/   }