元素之间的标记中的文本换行符

Question

我有一个错误，它是由我的 html 标记中的实际换行符引起的。我正在尝试找到支持我所看到的文档。这与<br>或CSS无关，而是实际标记中的换行符。基本上，这个：

<h4 class="condensed-title-wrap">
  <span class="condensed-title">Here is the title text</span>&nbsp;<i class="icon-icon-navigation-mobile-arrow-right"></i>
</h4>

呈现方式与此不同：

<h4 class="condensed-title-wrap">
  <span class="condensed-title">Here is the title text</span>
  &nbsp;
  <i class="icon-icon-navigation-mobile-arrow-right"></i>
</h4>

我所要求的是语言，也许还有一些文档证明这是真的。

Answer 1

不可见的回车符和行尾出现的换行符计为空格(不同于不间断空格，如   (。HTML 要求将某些空格序列压缩为单个空格字符。在第二个示例中， 之前部分的文本分隔符包括前一个换行符和前导空格。

规范中的几个地方都提到了这一点，其中一个在这里引用：

当用户代理要去除和折叠字符串中的空格时，它会 必须替换一个或多个连续空格字符的任何序列 在该字符串中具有单个 U+0020 空格字符，然后剥离 该字符串的前导和尾随空格。

当尝试让一对inline-block格式的元素并排放置时，通常会看到此问题，而不是在元素之间产生(通常为 4 个像素(间隙。

此代码会产生这样的间隙：

<div>
  <span>left block</span>
  <span>right block</span>
</div>

虽然此代码不会：

<div>
  <span>left block</span><span>
  right block</span>
</div>

出现差距的原因是一span的结尾和下一个的开头之间的空白。该解决方案将空格从span元素之间移动到字符串的开头，在该字符串中，空格将被忽略而不是压缩。