您如何处理 HTML 中的空白 [关闭]答案

【问题标题】：How do you handle white space in your HTML [closed]您如何处理 HTML 中的空白 [关闭]
【发布时间】：2008-08-19 15:27:31
【问题描述】：

我对 HTML 的最大排版挫折之一是它破坏连体空白的方式。例如，如果我有：

<span>Following punctuation rules.  With two spaces after the period.  </span>

句点后面的两个空格之一将被视为无关紧要的空格并被删除。我当然可以通过以下方式强制空白很重要：

<span>Following punctuation rules.&nbsp; With two spaces after the period.  </span>

但不得不这样做让我很恼火，而且我通常不会打扰。有没有人会自动在针对网页的外部内容提交中插入大量空白？

【问题讨论】：

【解决方案1】：

如果您真的希望保留空白，请尝试使用 css 属性：white-space: pre;

或者，您可以在标记中使用

标签。

顺便说一句，HTML 浏览器通常会忽略空白是一件好事，它可以让我们在不影响输出的情况下获得格式清晰的源代码。

【讨论】：

【解决方案2】：

对于您的具体示例，无需担心。 Web 浏览器执行印刷渲染，并在句点和后面的任何字符之间放置正确的空格量（根据字距调整规则，它会根据下一个字符而有所不同。）

如果你想要换行，
其实没什么大不了的，不是吗？

不确定这里有什么值得降模的...您不应该在一段时间后强制使用两个空格，除非您使用的是等宽字体。对于比例字体，rederer 在一段时间后调整适当的空间量。详细讨论请见here 和here。

【讨论】：

【解决方案3】：

它可能不是很优雅，但我将 CSS 应用于

标记。

总是有“空白”CSS 属性，但它可能会有点碰碰运气。

【讨论】：

【解决方案4】：

看看pre tag。它可能会做你想做的事。

【讨论】：

【解决方案5】：

您可以使用样式化的 pre 块来保留空白。大多数所见即所得的编辑器还插入给你...

总的来说，浏览器忽略空格是件好事。只需亲自查看此网站上的源代码，想象一下如果显示每个空间，该网站会看起来多么疯狂。

【讨论】：

【解决方案6】：

你最好使用 white-space: pre-wrap 而不是 white-space: pre 或以您的示例为例，后一种解决方案可以在“规则”上开始新的一行。只是因为你的 non-breakable space 打到了终点。

【讨论】：

【解决方案7】：

PRE 标记可以是一个有效的解决方案，具体取决于您的需要。但是，如果您尝试在整个站点的句子中使用 2 空格规则，您很快就会发现 PRE 标签保留的其他字符是换行符/回车符（或缺少）会破坏您尝试的任何样式去做。

一般来说，我倾向于忽略“句子后有 2 个空格”的规则，或者如果你是它的坚持者，我会坚持使用，但你偶尔会遇到 Nicolas 所说的问题.

【讨论】：

【解决方案8】：

webtypography.net 上有一个关于此主题的页面。该网站还有许多其他有趣的事情，即从排版的角度为网络创建文本，这些事情网页设计师通常甚至都不会考虑。值得一读。

【讨论】：