Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
CSS的空间处理
一、空格规则
浏览器通常会忽略HTML代码中的空白。
上面是一行HTML代码，文本的前面、里面和后面各有两个空格。为了便于识别，这里使用半圆形符号来表示空间。
浏览器的输出如下。
你好世界
如您所见，文本前后的空格将被忽略，内部连续的空格将只被算作一个。这是浏览器处理空格的基本规则。
如果希望空格按原样输出，可以使用前置标签。
另一种方法是用HTML实体来代替表示空格。
二、空格字符
处理空格的HTML规则适用于各种字符。除了普通的空格键，它还包括制表符(t)和新行字符(r和n)。
浏览器会自动将这些符号转换成普通的空格键。
在上面的代码中，文本包含一个换行符，浏览器将其视为空格。输出结果如下。
你好世界
因此，文本内部的换行无效(除非文本放在前置标签内部)。
菲尔普斯世界/p
上面的代码使用br标记来明确指示换行符。
三、CSS 的 white-space 属性
HTML语言的空间处理基本是直接过滤。这样的处理过于粗糙，完全忽略原文内部的空格可能是有意义的。
CSS提供了一个空白属性，可以提供更精确的方式来处理空格。这个属性有六个值，除了一个universal inherit(继承父元素)，其余五个值在下面依次介绍。
空白属性的默认值是正常的，这意味着浏览器以正常方式处理空格。
在上面的代码中，文本前面有两个空格，里面有一个长单词和一个新的行字符。
然后，容器p指定一个相对较小的宽度。为了便于识别，背景颜色设置为红色。
p { width: 100pxbackground:红色；}
显示效果如下。
可以看到文本开头的空格被忽略了。因为容器太窄，第一个单词溢出容器，然后在下一个空间换行。文本中的换行符会自动转换为空格。
当空白属性为nowrap时，不会出现换行符，因为超出了容器宽度。
显示效果如下。
所有文本显示为一行，不换行。
当空白属性是pre时，它将被视为pre标记。
显示效果如下。
以上结果与原文完全一致，保留所有空格和换行符。
当空格属性被预包装时，它基本上是根据预标记来处理的。唯一不同的是，当超过容器宽度时，会出现一条新的线。
p { white-space:预包装；}
显示效果如下。
文本开头的空格，里面的空格，换行符都保留，容器外换行。
当空白属性为行前时，表示保留换行符。除了换行符将按原样输出之外，其他都符合空白：正常规则。
显示效果如下。
除了文本内部的换行符没有转换成空格，其他都符合正常的处理规则。这对诗化文本很有用。
四、参考链接
HTML中空白什么时候重要？作者：帕特里克布罗塞特
《白色空间》，作者莎拉科普
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/192913.html原文链接：https://javaforall.net
