html5空白站位符号,空格代码(隐形空白符号)

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中空白什么时候重要？作者：帕特里克布罗塞特

《白色空间》，作者莎拉科普