css中white-space屬性
阿新 • • 發佈：2022-03-08
定義和用法
1.white-space 屬性設定element元素對內容中的空格的處理方式。
2.沒有設定white-space屬性，則預設為white-space:normal。
3.JavaScript語法：object.style.whiteSpace="pre"
列舉
這裡的空格是指空白字元，包括空格，製表符等空白字元，下面為了行文方便，統一用“空格”代表。
| 值 | 描述 |
|---|---|
| normal | 預設。合併空格，多個相鄰空格合併成一個空格，在原始碼中的換行作為空格處理，只會根據容器的大小進行自動換行。 |
| pre | 保持原始碼中的空格，有幾個空格算幾個空格顯示，同時換行只認原始碼中的換行和<br/>標籤，不會去自適應容器換行。其行為方式類似 HTML 中的 <pre> 標籤。 |
| nowrap | nowrap和normal一樣，也合併空格，但是不會根據容器大小換行，表示不換行。文字會在在同一行上繼續，直到遇到 <br/> 標籤為止。經常和overflow,text-overflow一起使用讓文字內容省略顯示 |
| pre-wrap | 保留空格，並且除了碰到原始碼中的換行和<br/>會換行外，還會自適應容器的邊界進行換行。 |
| pre-line | 合併空格，換行和pre-wrap一樣，遇到原始碼中的換行和<br/>會換行，碰到容器的邊界也會換行。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
| white-space屬性 | 原始碼空格 | 原始碼換行 | <br>換行 | 容器邊界換行 |
| normal | 合併 | 忽略 | 換行 | 換行 |
| nowrap | 合併 | 忽略 | 換行 | 不換行 |
| pre | 保留 | 換行 | 換行 | 不換行 |
| pre-wrap | 保留 | 換行 | 換行 | 換行 |
| pre-line | 合併 | 換行 | 換行 | 換行 |
實際應用
1.文字內容省略顯示
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 250px;
2.通過innerHtml的方式顯示頁面時，文字可以通過/r/n換行符來換行顯示
white-space: pre-line;