通过CSS将元素显示为预格式化文本

Question

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

例如，我可以使用CSS规则在此div中保持空格完整吗？

<div class="preformatted">

  Please procure the following items:

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

Answer 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>

Answer 2

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

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

Answer 3

是：

div.preformatted {
    white-space: pre;
    }

参考：

• white-space。

Answer 4

为了获得你可以使用的<pre>;

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