HTML/CSS - 在某些元素上保留空白的最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8994516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS - Best practice for preserving white space on certain elements?
提问by contactmatt
What is the bestway to preserve white space in HTML? We have a lot of pages that bring down data from our database, and the data may have multiple spaces in it. The rendered HTML elements that hold the data vary from anchor tags (<a>), spans (<span>), table rows (<tr>, <td>, etc.
在 HTML 中保留空白的最佳方法是什么？我们有很多页面从我们的数据库中提取数据，并且数据中可能有多个空格。保存数据的渲染 HTML 元素与锚标记不同(<a>), spans (<span>), table rows (<tr>, <td>, etc.
The easiest thing to do right now would be to add a global css class like so:
现在最简单的方法是添加一个全局 css 类，如下所示：
body a, span, tr, td { white-space: pre; }
I'm wondering if there is a better way to implement this withoutassigning a class to each individual HTML element.
我想知道是否有更好的方法来实现这一点，而无需为每个单独的 HTML 元素分配一个类。
回答by Diodeus - James MacFarlane
I would use the same technique, but inside a data class wrapper where it is needed:
我会使用相同的技术，但在需要它的数据类包装器中：
.data a, .data span, .data tr, .data td { white-space: pre; }
HTML:
HTML：
<div class="data">
....
</div>
回答by LastTribunal
<pre>no need for style</pre>
回答by Jukka K. Korpela
This depends on whether you wish to preserve allwhitespace in certain elements and what exactly should happen there. Assuming that there are no CSS rules that might interfere, your CSS can be simplified to
这取决于您是否希望保留某些元素中的所有空白以及在那里究竟应该发生什么。假设没有可能干扰的 CSS 规则，您的 CSS 可以简化为
a, span, tr { white-space: pre; }
because an aelement is alway within bodyand tdby default inherits the property from tr.
因为一个a元素总是在里面，body并且td默认情况下从tr.
If you only wish to prevent multiple spaces from collapsing, instead of forcing fixed division to lines, then white-space: pre-wrapor replacing spaces by no-break spaces might be more adequate.
如果您只想防止多个空格折叠，而不是强制固定分割线，那么white-space: pre-wrap或用不间断空格替换空格可能更合适。
Finally, the need and possibilities for restricting the rule to selected elements greatly depend on how the selection should be done. Perhaps you can selectively set white-spaceto pre(or pre-wrap) to some elements that enclose the relevant parts, remembering that the property inherits if not set on inner elements.
最后，将规则限制为选定元素的必要性和可能性在很大程度上取决于应该如何进行选择。也许您可以选择性地将(或)设置white-space为一些包含相关部分的元素，记住如果未在内部元素上设置，则该属性将继承。prepre-wrap
You can also break the inheritance: you could set white-space: preon a tableelement for example, if you wish to make the rule apply to mostof the content, and set white-space: normalon those rows or cells where it is not to be applied.
您还可以打破继承：例如，如果您希望将规则应用于大部分内容，则可以white-space: pre在table元素上设置，并在不应用的行或单元格上设置。white-space: normal
回答by Lars Hanke
What is wrong with replacing spaces by ? This should work inside any element and preserve the spaces in the rendered output.
用 替换空格有什么问题？这应该适用于任何元素并保留渲染输出中的空格。
