本篇文章给大家浅谈一下 CSS 进行空格处理的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
空格规则
html 代码的空格通常会被浏览器忽略.
<p> hello world </p>
上面是一行 HTML 代码, 文字的前部, 内部和后部各有两个空格.
浏览器的输出结果如下: hello world
可以看到, 文字的前部和后部的空格都会忽略, 内部的连续空格只会算作一个. 这就是浏览器处理空格的基本规则.
如果希望空格原样输出, 可以使用 <pre> 标签.
<pre> hello world </pre>
另一种方法是, 改用 HTML 实体 表示空格.
<p> hello world </p>
空格字符
HTML 处理空格的规则, 适用于多种字符. 除了普通的空格键, 还包括制表符 (t) 和换行符(r 和 n).
浏览器会自动把这些符号转成普通的空格键.
<p>hello world</p>
上面代码中, 文本内部包含了一个换行符, 浏览器视同为空格, 输出结果如下: hello world
所以, 文本内部的换行是无效的(除非文本放在 <pre> 标签内).
<p>hello<br>world</p>
上面代码使用
标签显式表示换行
CSS white-space 属性
HTML 语言的空格处理, 基本上就是直接过滤. 这样的处理过于粗糙, 完全忽视了原始文本内部的空格可能是有意义的.
CSS 提供了一个 white-space 属性, 可以提供更精确一点的空格处理方式. 该属性共有六个值, 除了一个通用的 inherit(继承父元素), 下面依次介绍剩下的五个值.
1,white-space: normal
white-space 属性的默认值为 normal, 表示浏览器以正常方式处理空格.
HTML:
- <p> hellohellohello hello
- world
- </p>
- style:
- p {
- width: 100px;
- background: red;
- }
上面代码中, 文本前部有两个空格, 内部有一个长单词和一个换行符.
文首的空格被忽略. 由于容器太窄, 第一个单词溢出容器, 然后在后面一个空格处换行. 文本内部的换行符自动转成了空格.
2,white-space: nowrap
white-space 属性为 nowrap 时, 不会因为超出容器宽度而发生换行.
- p {
- white-space: nowrap;
- }
所有文本显示为一行, 不会换行.
3,white-space: pre
white-space 属性为 pre 时, 就按照 <pre> 标签的方式处理.
- p {
- white-space: pre;
- }
上面结果与原始文本完全一致, 所有空格和换行符都保留了.
4,white-space: pre-wrap
white-space 属性为 pre-wrap 时, 基本还是按照 <pre> 标签的方式处理, 唯一区别是超出容器宽度时, 会发生换行.
- p {
- white-space: pre-wrap;
- }
文首的空格, 内部的空格和换行符都保留了, 超出容器的地方发生了折行.
5,white-space: pre-line
white-space 属性为 pre-line 时, 意为保留换行符. 除了换行符会原样输出, 其他都与 white-space:normal 规则一致.
- p {
- white-space: pre-line;
- }
除了文本内部的换行符没有转成空格, 其他都与 normal 的处理规则一致. 这对于诗歌类型的文本很有用.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17428.html