title: 微信小程序----CSS 的空格处理
date: 2018-08-10 13:55:15
tags: 微信小程序
categories: 微信小程序
WXRUI体验二维码
如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！
效果
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 的值
| 值 | 描述 |
|---|---|
| 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 是保留文本所有空格的常用方法！
WXRUI体验二维码
如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！
其他
QQ交流群: 264303060
我的博客，欢迎交流！
我的CSDN博客，欢迎交流！
微信小程序专栏
前端笔记专栏
微信小程序实现部分高德地图功能的DEMO下载
微信小程序实现MUI的部分效果的DEMO下载
微信小程序实现MUI的GIT项目地址
微信小程序实例列表
前端笔记列表
游戏列表
