如何处理HTML中的空白

时间:2020-03-05 18:40:46  来源:igfitidea点击:

我对HTML的最大的印刷挫败之一是它处理联合空格的方式。例如,如果我有:

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

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

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

但这让我不得不这么做,而且我通常不会打扰。是否有人在那里自动将大量空白插入打算用于网页的外部内容提交中?

解决方案

回答

我们可以使用样式化的pre块保留空白。大多数所见即所得的编辑器也会为我们插入...

总体而言,浏览器忽略空白是一个很好的选择。我们可以自己查看此网站上的源代码,并想象一下,如果显示了每个空格,该网站将变得多么疯狂。

回答

如果我们确实希望保留空白,请尝试使用css属性:white-space:pre;

或者,我们可以只在标记中使用<pre>标签。

顺便说一句,HTML浏览器通常忽略空白是一件好事,它使我们可以使用格式清晰的源代码,而不会影响输出。

回答

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

总是有"空白" CSS属性,但是它可能会碰碰运气。

回答

看一下pre标签。它可能会做我们想要的。

回答

我们最好使用空白:预包装而不是空白:pre或者
以示例为例,后一种解决方案可以在"规则"上开始新的一行,只是因为牢不可破的空间在该行的末尾。

回答

根据需要,PRE标签可以是有效的解决方案。但是,如果我们试图在整个站点的句子中使用2个空格规则,我们很快就会发现PRE标签保留的其他字符是换行/回车符(或者缺少换行符)会影响我们尝试的所有样式去做。

通常,我倾向于忽略"句子后的2个空格"规则,或者如果我们坚持使用它,我会坚持使用,但是我们有时会遇到Nicolas所说的问题。

回答

对于特定示例,无需担心。 Web浏览器执行印刷渲染,并在句点和后面跟随的任何字符之间放置正确的空间(根据字距调整规则,下一个字符会有所不同)。

如果我们想换行,<br/>没什么大不了的,对吗?

不确定这里是否需要使用downmod。除非使用了等宽字体,否则我们不应在句号后强制使用两个空格。对于比例字体,重新设置字体会在一段时间后紧紧保留适当的空间。有关详细讨论,请参见此处和此处。

回答

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