为什么浏览器不呈现由“空白：pre”元素内的尾随换行符引起的换行符？答案

【问题标题】：Why does the browser not render a line break caused by a trailing newline character inside a "white-space: pre" element?为什么浏览器不呈现由“空白：pre”元素内的尾随换行符引起的换行符？
【发布时间】：2017-04-19 18:52:41
【问题描述】：

这两个 div 渲染相同。为什么渲染前导换行符而不是尾随换行符（在第二个 div 中）？我阅读了 CSS3 规范中的 Line Breaking and Word Boundaries 部分，但它没有解释这种行为。

.pre {
  white-space: pre;
  border: 1px solid red;
  margin-bottom: 10px;
}

<div class="pre">
hello
world</div>

<div class="pre">
hello
world
</div>

【问题讨论】：

和 br 一样，如果它位于最后，它不会创建额外的空行。它只会破坏它。如果要显示，请在其后面添加内容：.pre:after { content:''; }
我认为这两者只是相同的。结束/结束标签的位置无关紧要。
When does whitespace matter in HTML?的可能重复

标签： css html

【解决方案1】：

为什么？好吧，显然是为了避免兼容性问题。

W3C 说：

为了避免 SGML 换行规则的问题和现有实现之间的不一致，作者不应依赖用户代理在开始标记之后或结束标记之前立即呈现空白。

and also:

请注意，在这些检查 [关于 white-space 属性的值] 发生之前，空白处理规则已经删除了分段中断后的所有制表符和空格。

现在还不清楚如果允许浏览器在结束标记之前保留空格，则会引入哪些不一致，但你有它。

【讨论】：

在 op 示例中，有一个 white-space/break ，不会被渲染。如果有 2 个换行符，那么将呈现一个，最后一个仍然被删除。 W3C 对我来说似乎很清楚 :)
天啊。现在看起来他们实际上是在引入不一致！现在不知道如何编辑我的答案。

【解决方案2】：

因为最后一个\n 不起作用。属性white-space: pre 按其名称工作。它只在单词前添加换行符。最后一个\n 无法识别为单词。

【讨论】：

??你可以解释吗？我没有看到与 white-space:pre; 的联系
@GCyrillus 我的意思是white-space: pre 的功能就像它被调用的那样。它仅在您包含在 <div></div> 中的单词之前有效，并且最后一个 \n 不会被识别为单词。