效果
HTML
<p> Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! </p>CSS
p{
width: 200px;
background-color: lightblue;
}改變 white-space 的值的效果
white-space 的值
| 值 | 描述 |
|---|---|
| normal | 默認。空白會被瀏覽器忽略。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。 |
| pre | 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 <pre> 標籤。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合併空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
解析文本空格的特點
- 文本開頭是兩個空格！
- 文本的第一個單詞和文本的第二個單詞之間是兩個空格！
- 剩餘文本單詞與單詞，單詞與符號之間的空格爲一個空格！
盒子 p 的樣式設置
p{
width: 200px;
background-color: lightblue;
}不同 white-space 的值的不同效果
normal
white-space屬性的默認值爲normal，表示瀏覽器以正常方式處理空格。
瀏覽器默認多個空格識別爲一個空格，同時將文本行首的空格去掉！
nowrap
white-space屬性爲nowrap時，不會因爲超出容器寬度而發生換行。
超出容器不換行，全部默認爲一個空格，同時行首的空格去掉！
pre
white-space屬性爲pre時，就按照 <pre> 標籤的方式處理。
超出容器不換行，行首默認一個空格，文本內的空格個數不變！
pre-wrap
white-space屬性爲pre-wrap時，基本還是按照 <pre> 標籤的方式處理，唯一區別是超出容器寬度時，會發生換行。
超出容器換行，保留文本中所有空格！
pre-line
white-space屬性爲pre-line時，意爲保留換行符。除了換行符會原樣輸出，其他都與white-space:normal規則一致。
超出容器換行，全部默認爲一個空格，同時行首的空格去掉！
inherit
white-space屬性爲inherit時，從父元素繼承 white-space 屬性的值。
繼承父元素的 white-space 屬性值！
總結
- white-space:nowrap 是在實現移動端不換行進行滑動的常見效果！
- white-space:pre-wrap 是保留文本所有空格的常用方法！
其他
QQ交流羣: 264303060
