通过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

是：

div.preformatted { 
    white-space: pre; 
    } 

参考：

• white-space。

Answer 3

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

我觉得 “预包装” 是更好的。它可以帮助长时间排队。

Answer 4

要订购<pre>您可以使用;

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