的HTML <pre> 標簽添加了額外的換行符

Question

HTML標簽<pre>在文本的頂部和底部添加換行符。

所以：

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

顯示為：

Line     1

Line     2

有沒有一種方法可以讓它僅在HTML標記中而不是通過CSS來尊重空格而不換行？

Answer 1

這不是之間的線路中斷pre S，而是瀏覽器的原生樣式表的性質。 例如，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/