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

---

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 属性的值。

解析文本空格的特点

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

盒子 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 属性值！

总结

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

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

QQ交流群: 264303060

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表