空格是什么意思_CSS 的换行处理warp空格处理 white-space的用法

经线

word-wrap：仅在允许的连字点处换行（浏览器保留默认处理）。

word-wrap:break-word 在长单词或 URL 内拆分单词。

2. 5 种类型的空间实体

HTML 提供了五种空格实体（space），它们具有不同的宽度。不间断空格（ ）是常规空格的宽度，适用于所有主流浏览器。其他空格（   & ;‌‍）在不同的浏览器中具有不同的宽度。

它叫 No-Break Space，是最常见、使用最多的空格，大多数人可能只是接触过而已。它是通过按空格键创建的空格。在 HTML 中，如果使用空格键创建此空格，则空格不会累积（只算 1 个），需要使用 HTML 实体表示来累积。此空格所占的宽度明显且强烈地受字体影响。

它叫“半角空格”，全称是En Space，en是字体排版中的一种计量单位，是em宽度的一半。按照定义，它相当于字体宽度的一半（比如16px字体中是8px）。名义上就是小写字母n的宽度。这个空格继承了空格家族的一贯特点：透明。这个空格有一个很稳定的特性，就是它所占的宽度正好是中文宽度的1/2，基本不受字体的影响。

它叫“全宽空格”，全称是Em Space，em是排版中的一种计量单位，相当于当前指定的点。比如16px的字体中1em就是16px。这个空格也继承了空格家族的一贯特点：透明，这个空格还有一个很稳定的特点，就是它所占的宽度正好是1个中文宽度，基本不受字体的影响。

它叫Thin Space，我们不妨叫它“薄空间”，也就是空间很薄很薄，占用的宽度很小，是em宽度的六分之一。

‌

它被称为零宽度非连字符，缩写为“ZWNJ”。它是电子文本中放置在两个字符之间的非打印字符，用于抑制原本会出现的连字，而是用其原始字形绘制两个字符。 中的零宽度非连字字符被映射到“”（零宽度非，U+200C），HTML 字符值参考为：‌

‍

它被称为零宽连字符，全称是 Zero Width，缩写为“ZWJ”，是一种非打印字符。它被放置在一些需要复杂排版的语言（如阿拉伯语和印地语）中的两个字符之间，使这两个本来不能连字符的字符产生连字符效果。零宽连字符的代码点是 U+200D（HTML：& #8205; ‍）。

此外，浏览器还会将以下字符解释为空格：空格（& #x0020;）、制表符（& #x0009;）、换行符（& #x000A;）、回车符（& #x000D;）、以及（& #12288;）等。

1. 空间规则

HTML 代码中的空格通常会被浏览器忽略。

◡◡hello◡◡world◡◡
 

以上是一行 HTML 代码，文本开头、文本内、文本结尾处均有两个空格。为了方便识别，这里使用半圆符号 ◡ 来表示空格。

浏览器输出如下。

你好世界

可以看到，文本开头和结尾的空格都被忽略了，里面连续的空格只算一个，这是浏览器处理空格的基本规则。

如果希望空格按原样输出，可以使用pre标签。

◡◡hello◡◡world◡◡

另一种方法是使用 HTML 实体来表示空格。
  hello  world  

2. 空格字符
HTML 具有处理适用于各种字符的空白的规则，除了正常的空格键之外，还包括制表符（\t）和换行符（\r 和 \n）。
浏览器会自动将这些符号转换为普通的空格键。
hello
world

在上面的代码中，文本包含换行符，但浏览器将其视为空格。输出如下。
你好世界
因此，文本内的换行符无效（除非文本放在 pre 标签内）。
hello
world

上面的代码使用 br 标签明确指示换行。
3. CSS 空白属性
HTML语言对空格的处理基本都是直接过滤，这种处理过于粗糙，完全忽略了原文中的空格可能是有意义的。
CSS 提供了一个 white-space 属性，可以提供更精确的方式来处理空格。该属性有六个值，除了一个常用的值（从父元素继承）外，其余五个值在下面介绍。
3.1 空白：
white-space 属性的默认值是 ，这意味着浏览器以正常方式处理空白。
上面的代码中，文本开头有两个空格，里面有一个长单词和一个换行符。
可以看到，文本开头的空格被忽略了。由于容器太窄，第一个单词溢出了容器，然后在下一个空格处换行。文本内部的换行符会自动转换为空格。
3.2 空白：
当white-space属性为 时，不会因为超出容器宽度而出现换行。
所有文本显示在一行上，不换行。
3.3 空白：前置
当 white-space 属性为 pre 时，其处理方式与 pre 标签相同。
上述结果与原文完全相同，所有空格和换行符均被保留。
3.4 空白：预包装
当white-space属性为pre-wrap时，处理方式基本和pre标签一致，唯一不同就是超出容器宽度时会发生换行。
文本开头的空格，文本内的空格以及换行符都保留，超出容器的地方就换行。
3.5 行前空白
当 white-space 属性设置为 pre-line 时，表示保留换行符。除了换行符按原样输出外，其他一切都与 white-space: 规则一致。
除了文本中的换行符不会转换为空格外，其他所有内容都与 相同。这对于类似诗歌的文本很有用。