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

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

通过替换空格有什么问题？这应该在任何元素内部工作并保留渲染输出中的空格.

这种错误的是,有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个其他可能的空格需要关注. (12认同)
但是,在我看来,使用空格:pre选项更简单/更容易,因为您可以在不更改代码的情况下更改样式表. (3认同)

Answer 4

这取决于您是否希望保留某些元素中的所有空格以及在那里应该发生什么.假设没有可能干扰的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对这些行或单元格的地方不适用.