css 空格处理

HTML 代码的空格通常会被浏览器忽略。通常文字的前部和后部的空格都会忽略,内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出,可以使用<pre>标签。

说明:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

HTML 处理空格的规则,适用于多种字符。除了普通的空格键,还包括制表符(\t)和换行符(\r和\n)。

浏览器会自动把这些符号转成普通的空格键。

CSS 的 white-space 属性

HTML 语言的空格处理,基本上就是直接过滤。这样的处理过于粗糙,完全忽视了原始文本内部的空格可能是有意义的。

CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。

1.white-space: normal

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

例如:文字前部后补的空格被忽略,内部连续的多个字符会算作一个,文字内部换行符被当做空格,如果出现移出容器的情况,单词不会换行,单词后的空格会被处理成换行...

2.white-space: nowrap

nowrap:不换行,不会因为超出容器宽度而发生换行。

3.white-space: pre

就按照<pre>标签的方式处理。显示的结果与原始文本完全一致,所有空格和换行符都保留了。

4.white-space: pre-wrap

基本还是按照<pre>标签的方式处理,唯一区别是超出容器宽度时,会发生换行。

5.white-space: pre-line

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

除了文本内部的换行符没有转成空格,其他都与normal的处理规则一致。这对于诗歌类型的文本很有用。

猜你喜欢

转载自blog.csdn.net/u012149906/article/details/81360851
今日推荐