<span> + ^{之间有一个由换行引起的空白} </span>

Question

使用两个单词之间的空格呈现以下HTML代码段（两行之间有换行符：

<span>foo</span>
<sup>bar</sup>

然而

<span>foo</span><sup>bar</sup>

在两个单词之间没有空格的情况下呈现。

那么为什么换行会导致这种行为。换行与否不应该影响渲染！？

Answer 1

它们被视为空格，因此一个或多个换行符被视为单个空格（就像所有其他空格字符一样）

  

换行符定义为回车符（
），一行   Feed（
）或回车/换行符对。所有换行符   构成白色空间。

http://www.w3.org/TR/html401/struct/text.html#line-breaks

Answer 2

通常，换行符相当于HTML中的空格。有一些例外情况，根据formal rules on line breaks，中断应该在两个帐户上被忽略（它紧跟在开始标记之后，紧跟在结束标记之前） 。但浏览器从未正确实现过这些功能，因此它们将您的标记视为等同于

<span>foo</span> <sup>bar</sup>

结论是，如果你希望元素之间的内容没有空间，你应该在同一行写一个结束标记和一个开始标记。

但是，您可以在代码中包含换行符，例如

<span>foo</span><sup
class=zap>bar</sup>

Answer 3

对于CJK（中文日文朝鲜语）字符，可能很难找到断点，可以插入booststrap的<span class="sr-only"></span>作为打破行以获得更好代码读取的方法，例如：

这是一<span class="sr-only">
</span>行无空格的文字