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

【问题标题】：HTML/CSS - Best practice for preserving white space on certain elements?HTML/CSS - 在某些元素上保留空白的最佳实践？
【发布时间】：2012-02-18 03:40:39
【问题描述】：

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

现在最简单的做法是添加一个全局 css 类，如下所示：

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

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

【问题讨论】：

您的示例没有使用 css 类，也不需要您为每个单独的元素分配一个类。
@RichardMarskell-Drackir 是的，我很少处理 CSS，不太了解 CSS 哈哈

标签： html css whitespace

【解决方案1】：

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

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

HTML：

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

</div>

【讨论】：

这是个好主意。包装输出比更改该输出中的所有标签要容易得多。

【解决方案2】：

用替换空格有什么问题？这应该适用于任何元素并保留渲染输出中的空间。

【讨论】：

这里的错误是有26个不同的空格（\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF）（perfectionkills.com/whitespace-deviations列出了25个，但也有\uFEFF）并且“空白”的宽度不是在所有可能的空白处都相同。由字体设计师决定字符的宽度，也包括空白字符。如果将空格 (\x20) 替换为，应该没问题，但还有 25 个其他可能的空格需要处理。
根据您的服务器端语言，您可能有类似 char.iswhitespace msdn.microsoft.com/en-us/library/system.char.iswhitespace.aspx 这样的内容，可以轻松替换所有空白字符。
但是，在我看来，使用 whitespace: pre 选项更简单/更容易，因为您可以在不更改代码的情况下更改样式表。
HTML5 规范规定浏览器只能折叠 5 个 (ascii) 空白字符（空格、制表符、cr、lf、ff）。 unicode 不会崩溃，至少在现代浏览器上不会。 w3.org/TR/html5/infrastructure.html#skip-whitespace

【解决方案3】：

这取决于您是否希望在某些元素中保留 all 空格，以及那里应该发生什么。假设没有可能干扰的 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，例如，如果你想让规则应用于大部分内容，然后设置@987654332 @ 在那些不应用它的行或单元格上。

【讨论】：

【解决方案4】：

<pre>no need for       style</pre>

【讨论】：

请注意pre 标签通常显示为block 元素。
还要注意pre 通常（总是？）在其默认样式中包含font-family: monospace;。
对于很多人来说，这不是一个有用的答案，因为很多时候最好让你的标签与他们正在制作的 UI 元素相对应，这对 SEO 来说更好。例如，永远不要将标题放在
```
 中。而是使用 、
 等。
```

、

等。