为什么浏览器不会呈现由“white-space：pre”中的尾随换行符引起的换行符。元件？ [英] Why does the browser not render a line break caused by a trailing newline character inside a "white-space: pre" element?

问题描述

这两个div都呈现相同的效果。为什么呈现前导换行符而不是尾随换行符（在第二个div中）？我在CSS3规范中阅读了换行和Word边界部分，但是它没有解释这种行为。

Both of these divs render the same. Why is the leading newline rendered but not the trailing newline (in the second div)? I read the Line Breaking and Word Boundaries section in the CSS3 spec but it doesn't explain this behavior.

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

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

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

推荐答案

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

Why? Well, to avoid compatibility problems, apparently.

W3C 说：

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

In order to avoid problems with SGML line break rules and inconsistencies among extant implementations, authors should not rely on user agents to render white space immediately after a start tag or immediately before an end tag.

以及：

请注意，空格处理规则已经在分段中断之后删除了任何制表符和空格，然后才进行这些检查[关于空白空间属性的值] 。

Note that the white space processing rules have already removed any tabs and spaces after the segment break before these checks [on the value of the white-space property] take place.

现在还不清楚如果允许浏览器保留这些不一致的话结束标记前的空格，b你有它。

Now it is not clear exactly which inconsistencies would be introduced if the browsers were allowed to keep the whitespace before the end tag, but there you have it.

这篇关于为什么浏览器不会呈现由“white-space：pre”中的尾随换行符引起的换行符。元件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！