pre(html标签)和white-space之间的区别:preline line omission

时间:2012-08-24 17:22:26

标签: html css

我认为pre(html标签)处于活动状态,就像'white-space:pre'一样。但事实并非如此。

<pre>
aaa
bbb
</pre>

<p style="white-space:pre;">
aaa
bbb
</p>

<pre>忽略第一个和最后一个\n。但<p>保留第一个\n并忽略最后一个{{1}}。 为什么呢?

jsfiddle test

4 个答案:

答案 0 :(得分:5)

HTML标准声明:

  

注意:在HTML语法中,立即使用前导换行符   在pre元素开始标记之后被剥离。

请在此处阅读:http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-pre-element

因此,<pre>元素包含此特殊规则。似乎如果其他类型的元素具有white-space:pre设置,则该规则不适用。

答案 1 :(得分:1)

实际上,它们是一样的。您为<p> s获取空间的原因是因为默认情况下<p>会在其上方添加一个空行,以便您可以区分段落。 <pre>不这样做,因此你没有额外的空间。

答案 2 :(得分:0)

<pre> - 标签显示带有等宽字体的内容,这意味着每个字符都具有相同的宽度。

更容易阅读,而不是<p style="white-space:pre;">中使用的浏览器的标准字体。

答案 3 :(得分:0)

HTML pre元素和CSS设置white-space: pre是完全不同的结构;混淆两者是一个类别错误。但你似乎指的是关于换行符的渲染差异。

By the specifications,应忽略紧跟在开始标记之后的换行符,所以

<pre>
aaa
bbb
</pre>

应该相当于

<pre>aaa
bbb
</pre>

如果p替换为pre或添加了某些样式,则不应以任何方式更改。但浏览器并不总是遵守规则,这就是其中一种情况。

他们只是区别对待元素。士气是您应该避免使用pre元素以及white-space: pre,如果您使用它们,请继续关注此变体。如果需要,请不要通过换行符立即按开始标记,而是使用空格和换行符(如果您想在开头有空行)。