換行、文字隱藏省略號問題

一、一行超出文字隱藏

overflow: hidden;   /*自動隱藏文字*/
text-overflow: ellipsis;   /*文字隱藏後添加省略號*/
white-space: nowrap;   /*強制不換行*/

 
二、div顯示兩行文字，超出兩行部分省略號顯示

overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;    /* 限制行數 */
-webkit-box-orient: vertical;

 
三、white-space屬性可設置不換行 值 描述  normal  默認。空白會被瀏覽器忽略。  pre  空白會被瀏覽器保留。其行爲方式相似 HTML 中的 <pre> 標籤。  nowrap  文本不會換行，文本會在在同一行上繼續，直到遇到
標籤爲止。  pre-wrap  保留空白符序列，可是正常地進行換行。  pre-line  合併空白符序列，可是保留換行符。  inherit  規定應該從父元素繼承 white-space 屬性的值。  
 
 
 
 
 
 
 
 
四、word-break屬性設置自動換行的處理方法 值 描述  normal  使用瀏覽器默認的換行規則。  break-all  容許在單詞內換行(解決長單詞或url地址換行顯示)
 keep-all  只能在半角空格或連字符處換行。轉載於猿2048:➣《換行、文字隱藏省略號問題》