HTML/CSS - 在某些元素上保留空白的最佳实践？

Question

在 HTML 中保留空白的最佳方法是什么？我们有很多页面从我们的数据库中提取数据，数据中可能有多个空格。保存数据的渲染 HTML 元素与 anchor 标记不同(<a>), spans (<span>), table rows (<tr>, <td>, etc.

现在最简单的事情就是像这样添加一个全局 css 类:

body a, span, tr, td { white-space: pre; }

我想知道是否有更好的方法来实现这个而不为每个单独的 HTML 元素分配一个类。

Answer 1

我会使用相同的技术，但在需要它的数据类包装器中:

.data a, .data span, .data tr, .data td { white-space: pre; }

HTML:

<div class="data">
....

</div>