css處理文字不換行、換行截斷、溢出省略號

1、使文字不換行

white-space: nowrap;

值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。
pre-wrap	保留空白符序列，但是正常地進行換行。
pre-line	合並空白符序列，但是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

 

2、允許長單詞換行

word-wrap:break-word;

值	描述
normal	只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

 

3、換行不截斷單詞

word-break:break-all;

值	描述
normal	使用瀏覽器默認的換行規則。
break-all	允許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

 

4、單行文字超出顯示省略號

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

5、多行文字超出顯示省略號

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

有人住高樓，有人處深溝。 有人光萬丈，有人一生綉。 時光是匆匆，回首無舊夢。 人生若幾何，凡塵事非多。 深情總遺卻，妄自也灑脫。