通过CSS将元素显示为预格式化文本 [英] Display element as preformatted text via CSS

问题描述

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

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

<div class="preformatted">

  Please procure the following items:

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

推荐答案

使用 pre 以保留空格预格式化，如 pre 元素。要更进一步，还要添加 font-family：monospace ，因为 pre 元素通常设置为等宽字体（例如用于代码块）。

Use white-space: pre to preserve whitespace preformatting as in the pre element. To go a step further, also add font-family: monospace, as pre elements are typically set in a monospace font by default (e.g. for use with code blocks).

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

<div class="preformatted">

  Please procure the following items:

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

这篇关于通过CSS将元素显示为预格式化文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！