通过 CSS 将元素显示为预先格式化的文本 [重复]答案

【问题标题】：Display element as preformatted text via CSS [duplicate]通过 CSS 将元素显示为预先格式化的文本 [重复]
【发布时间】：2012-03-17 20:50:02
【问题描述】：

有没有办法通过 CSS 模拟 pre 元素的显示？

例如，我可以通过使用 CSS 规则来保持这个 div 中的空白不变吗？

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

【问题讨论】：

【解决方案1】：

使用white-space: pre 保留空白预格式化，就像在pre 元素中一样。更进一步，还要添加font-family: monospace，因为pre 元素通常默认设置为等宽字体（例如用于代码块）。

.preformatted {
    font-family: monospace;
    white-space: pre;
}

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

【讨论】：

【解决方案2】：

.preformatted {
   white-space: pre-wrap;
}

我认为“预包装”更好。它可以帮助排长队。

【讨论】：

【解决方案3】：

是的：

div.preformatted {
    white-space: pre;
    }

参考：

【讨论】：

【解决方案4】：

为了得到<pre>你可以使用；

div.preformatted{ white-space: pre ; display: block; }

【讨论】：