微信小程序----CSS 的空格处理

效果

HTML

<p>  Hello   Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! Hello Rattenking ! </p>

CSS

p{
    width: 200px;
    background-color: lightblue;
}

改变 white-space 的值的效果

微信小程序----CSS 的空格处理

white-space 的值

解析文本空格的特点

1. 文本开头是两个空格！
2. 文本的第一个单词和文本的第二个单词之间是两个空格！
3. 剩余文本单词与单词，单词与符号之间的空格为一个空格！

盒子 p 的样式设置

p{
    width: 200px;
    background-color: lightblue;
}

不同 white-space 的值的不同效果

normal

white-space属性的默认值为normal，表示浏览器以正常方式处理空格。

white-space:normal

浏览器默认多个空格识别为一个空格，同时将文本行首的空格去掉！

nowrap

white-space属性为nowrap时，不会因为超出容器宽度而发生换行。

white-space:nowrap

超出容器不换行，全部默认为一个空格，同时行首的空格去掉！

pre

white-space属性为pre时，就按照 <pre> 标签的方式处理。

white-space:pre

超出容器不换行，行首默认一个空格，文本内的空格个数不变！

pre-wrap

white-space属性为pre-wrap时，基本还是按照 <pre> 标签的方式处理，唯一区别是超出容器宽度时，会发生换行。

white-space:pre-wrap

超出容器换行，保留文本中所有空格！

pre-line

white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

white-space:pre-line

超出容器换行，全部默认为一个空格，同时行首的空格去掉！

inherit

white-space属性为inherit时，从父元素继承 white-space 属性的值。

white-space:pre-line

继承父元素的 white-space 属性值！

总结

1. white-space:nowrap 是在实现移动端不换行进行滑动的常见效果！
2. white-space:pre-wrap 是保留文本所有空格的常用方法！