Display element as preformatted text via CSS

Is there any way to emulate the display of a pre element via CSS?

For example, can I keep the whitespace intact in this div by using a CSS rule?

<div class="preformatted">


Please procure the following items:


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

72464 次浏览

小开

是的:

div.preformatted {
white-space: pre;
}

Reference:

小开

最佳答案

使用 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>

小开

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

I think "pre-wrap" is better. It can help with long length in line.

小开

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

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