HTML/CSS - 如何在特定元素中保留空白的最佳实践？

Question

如何在HTML中保留空格？我们有很多页面从数据库获取数据，这些数据可能包含多个空格。渲染这些数据的HTML元素有各种各样的类型，例如锚标签(<a>)、span标签(<span>)和表格行及单元格(<tr>, <td>等)。

目前最简单的方法是添加一个全局的CSS类，如下所示：

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

我想知道是否有更好的方式来实现这个，而不需要给每个HTML元素分配一个类。

- contactmatt

---

这个例子没有使用CSS类，也不需要给每个元素分配一个类。 - Richard Marskell - Drackir

@RichardMarskell-Drackir 嗯，我很少涉及CSS，不太懂CSS哈哈 - contactmatt

Answer 1

我会使用相同的技术，但在需要时将其放置在数据类包装器内：

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

HTML：

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

</div>

- Diodeus - James MacFarlane

---

这是一个好主意。将输出进行包装要容易得多，而不是更改该输出中的所有标记。 - Alex Wayne

Answer 2

<pre>no need for       style</pre>

- I Stand With Russia

---

请注意，pre标签通常显示为块级元素。 - Krisztián Balla

请注意，“pre”元素在其默认样式中通常（可能总是）包含“font-family:monospace;”。 - derpedy-doo

对于许多人来说，这并不是一个有用的答案，因为大部分时间最好让您的标签与它们所制作的UI元素相对应，这对于SEO更好。例如，永远不要将标题放在<pre>中。而是使用<h1>、<h2>等标签。 - John Miller

Answer 3

这取决于您是否希望保留某些元素中的所有空格以及在那里发生的确切情况。假设没有可能会干扰的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。

- Jukka K. Korpela

Answer 4

使用&nbsp;代替空格有什么问题？这样可以在任何元素内起作用，并保留呈现输出中的空格。

- Lars Hanke

---

这里的问题在于有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) (http://perfectionkills.com/whitespace-deviations/ 列出了25个，但实际上还有 \uFEFF) ，而所有可能的空格字符的“空格宽度”并不相同。这是由字体设计师决定字符（包括空格字符）宽度的。如果您用 替换空格（\x20），那么应该没问题，但是您还需要注意其他25个可能的空格字符。 - Timo Kähkönen

根据您的服务器端语言，您可能会有类似于char.iswhitespace的东西，它可以轻松替换所有空白字符。 - Chris Weber

然而，在我看来，使用空格：pre选项更为简单，因为您可以在不更改代码的情况下更改样式表。 - Chris Weber

HTML5规范指出，浏览器只应折叠5个（ASCII）空格字符（空格、制表符、回车、换行、换页）。Unicode字符不会折叠，至少在现代浏览器上是这样的。https://www.w3.org/TR/html5/infrastructure.html#skip-whitespace - JasonWoof

关于   的主要问题是它是不可打断的，这会在尺寸改变时破坏响应式设计。 - Ranmocy