Question

HTML标记＆lt; pre＆gt;在文本的顶部和底部添加换行符。

所以：

<pre>Text line     1</pre>
<pre>Text line     2</pre>

显示为：

Line     1

Line     2

有没有办法只在HTML标签本身而不是通过CSS让它尊重没有换行符的空格？

Answer 1

这不是pre之间的换行符，而是浏览器本机样式表的性质。例如，Chrome会将pre格式的文本设置为在顶部和底部具有1em的边距。

所以要删除边距，您应该添加：

pre { margin: 0; }

可能还有其他浏览器没有强加默认的1em顶部/底部边距。但是，最好的办法是手动设置边距以实现一致的跨浏览器外观。或者更好的是，使用CSS重置覆盖所有浏览器的本机CSS样式。

（对于记录，Google Chrome的pre代码的原生样式表规则）：

pre, xmp, plaintext, listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px; /* here's the reason you get the "line break" */
}

Answer 2

只需添加以下CSS：

pre{
    margin:0;
    }

检查小提琴： http://jsfiddle.net/A3fxF/

HTML <pre> tag adds in extra line breaks</pre>

2 个答案: