Pre元素的空白问题

Question

我在使用HTML pre元素时遇到了一个非常烦人的问题。我不知道为什么当我从未真正做到这一点时，它会创造出如此多的空白空间。在我的代码编辑器中，所有内容都正确缩进，确保HTML 100％有效，但每当我在浏览器上测试时;突然出现白色空间。为了使事情更容易理解，这里是pre在我的控制台内看起来的图像。

这是HTML / CSS代码。

HTML

<pre>
    &#60;!DOCTYPE html&#62;
    &#60;html&#62;
    &#60;head&#62;
    &#60;title&#62;My website&#60;title&#62;
    &#60;/head&#62;
    &#60;body&#62;

    &#60;script type="text/javascript"&#62;
         alert("Hello world!");
    &#60;/script&#62;
    &#60;/body&#62;
    &#60;/html&#62;
</pre>

CSS

pre{
    overflow: auto;
    background: #ddd;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -ms-pre-wrap;
}

如果它有帮助，我也使用棘轮，以使其准备移动。 （请注意，移除空白区域没有帮助）。 问候。

Answer 1

而不是：

white-space: pre-wrap

使用：

white-space: pre-line

DEMO

  

white-space

     

white-space属性用于描述内部的空格   元素被处理。

     

<强> 预包装

     

保留空格序列。

     

<强> 预线

     

空白的序列已折叠。