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 的值的效果
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