Html 通过 CSS 将元素显示为预先格式化的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9753597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display element as preformatted text via CSS
提问by Dagg Nabbit
Is there any way to emulate the display of a preelement via CSS?
有没有办法pre通过 CSS模拟元素的显示？
For example, can I keep the whitespace intact in this div by using a CSS rule?
例如，我可以使用 CSS 规则保持这个 div 中的空白完整吗？
<div class="preformatted">
Please procure the following items:
- Soup
- Jam
- Hyphens
- Cantaloupe
</div>
回答by BoltClock
Use white-space: preto preserve whitespace preformatting as in the preelement. To go a step further, also add font-family: monospace, as preelements are typically set in a monospace font by default (e.g. for use with code blocks).
使用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>回答by Kondrashenkov Anton
.preformatted {
white-space: pre-wrap;
}
I think "pre-wrap" is better. It can help with long length in line.
我认为“预包装”更好。它可以帮助排长队。
回答by David says reinstate Monica
回答by Rasika Perera
inorder to get <pre>you may use;
为了让<pre>您可以使用；
div.preformatted{ white-space: pre ; display: block; }
