css處理文字不換行、換行截斷、溢位省略號
阿新 • • 發佈：2021-06-26
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; 有人住高樓，有人處深溝。 有人光萬丈，有人一生繡。 時光是匆匆，回首無舊夢。 人生若幾何，凡塵事非多。 深情總遺卻，妄自也灑脫。