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

Question

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

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

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

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

但不得不这样做让我很恼火，而且我通常不会打扰。是否有人会自动在用于网页的外部内容提交中插入重要的空格？

Answer 1

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

如果您想要换行，<br/>并不是什么大问题，不是吗？

---

不确定这里有什么值得下载的......除非您使用等宽字体，否则不应在句号后强制使用两个空格。对于比例字体，渲染器会在句号后调整适当的间距。看 这里 和 这里 进行详细讨论。

Answer 2

如果您确实希望保留空白，请尝试 css 属性：空白：前；

或者，您可以在标记中使用 <pre> 标记。

顺便说一句，HTML 浏览器通常会忽略空白，这是一件好事，它允许我们拥有格式清晰的源代码，而不影响输出。

Answer 3

它可能不是很优雅，但我将 CSS 应用于 <pre> 标记。

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

Answer 4

看看 预标记. 。它可能会做你想做的事。

Answer 5

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

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

Answer 6

你最好使用空格：预换行而不是空白：预或以您的示例为例，后面的解决方案可以在“规则”上另起一行。仅仅因为您的 n在-乙可重复的 space 击中了线的末端。

Answer 7

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

一般来说，我倾向于忽略“句子后有 2 个空格”的规则，或者如果您坚持这样做，我会坚持使用，但您偶尔会遇到尼古拉斯所说的问题。

Answer 8

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