为什么浏览器不会呈现由“white-space:pre”元素中的尾部换行符引起的换行符?

时间:2017-04-19 10:18:10

标签: html css html5

这两个div都呈现相同的效果。为什么呈现前导换行符而不是尾随换行符(在第二个div中)?我阅读了CSS3规范中的invisible reCaptcha部分,但它没有解释这种行为。

.pre {
  white-space: pre;
  border: 1px solid red;
  margin-bottom: 10px;
}
<div class="pre">
hello
world</div>

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

2 个答案:

答案 0 :(得分:2)

为什么呢?好吧,为了避免兼容性问题,显然。

W3C说:

  

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

and also

  

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

现在还不清楚如果允许浏览器在结束标记之前保留空格,那么将引入哪些不一致性,但是你有它。

答案 1 :(得分:0)

因为上次\n无法正常工作。属性white-space: pre可以正常工作。它只在一个单词之前添加换行符。最后\n未被识别为单词。