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

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

出现在行尾的隐形回车returns和换行算作白色space（不同于不间断的白色space如 ). HTML 要求将白色 space 的某些序列压缩为单个 space 字符。在您的第二个示例中，文本在   之前的部分中断，其中包括前一个换行符和前导 spaces.

规范中多处提到了这一点，one of which 在这里引用：

When a user agent is to strip and collapse whitespace in a string, it must replace any sequence of one or more consecutive space characters in that string with a single U+0020 SPACE character, and then strip leading and trailing whitespace from that string.

当试图让一对 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 的开头之间的白色 space。该解决方案将白色 space 从 span 元素之间移动到字符串的开头，在那里它被忽略而不是压缩。

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

text line breaks in markup between elements

html

text

newline