效果
HTML
1 | <p> Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! </p> |
CSS
1 | p{ |
改变 white-space 的值的效果
white-space 的值
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
解析文本空格的特点
- 文本开头是两个空格！
- 文本的第一个单词和文本的第二个单词之间是两个空格！
- 剩余文本单词与单词，单词与符号之间的空格为一个空格！
盒子 p 的样式设置
1 | p{ |
不同 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
