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

在 HTML 中保留空白的 最好的方法是什么？我们有很多页面从数据库中下载数据，这些数据可能包含多个空格。呈现的包含数据的 HTML 元素与锚标记 (<a>), spans (<span>), table rows (<tr>, <td>, etc.不同

现在最简单的事情就是添加一个全局 css 类，如下所示:

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

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

100311

小开

这取决于您是否希望在某些元素中保留所有空格，以及在那里究竟应该发生什么。假设没有可能干扰的 CSS 规则，您的 CSS 可以简化为

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

因为 a元素总是在 body内，而 td默认情况下继承 tr的属性。

如果您只希望防止多个空格崩溃，而不是强制固定除法到线，那么 white-space: pre-wrap或者用无中断空格替换空格可能更为合适。

最后，将规则限制在所选元素的必要性和可能性在很大程度上取决于如何进行选择。也许您可以选择性地将 white-space设置为 pre(或 pre-wrap) ，以包含相关部分的某些元素，记住如果没有在内部元素上设置属性，则该属性将继承。

还可以中断继承: 例如，如果希望将规则应用于内容的 大部分，可以在 table元素上设置 white-space: pre，并在不应用该规则的行或单元格上设置 white-space: normal。