Question

在HTML中保留空格的最佳方法是什么？我们有很多页面会从我们的数据库中删除数据，并且数据中可能包含多个空格。保存数据的呈现HTML元素与锚标记(<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>

Answer 2

<pre>no need for       style</pre>

Answer 3

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

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

因为a元素始终位于body，td默认情况下会从tr继承该属性。

如果您只希望防止多个空格折叠，而不是强制将固定除法划分为行，则white-space: pre-wrap或用不间断空格替换空格可能更合适。

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

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

Answer 4

用＆amp; nbsp;替换空格有什么问题？这应该在任何元素内部工作，并保留渲染输出中的空格。