使用CSS在段落中每个句号后两个空格？

Question

如何使用CSS在段落中的每个句点后放置两个空格？

Answer 1

啊,旧的"两个空间后一段时间"的模因再次抬起它的丑陋头脑.

一段时间之后的两个空格是与打字机世界或等宽字体世界有关的东西.我们很久以前就已经超越了它,从TeX开始甚至之前.关键是在一段时间后不要有一个或两个空格字符,而是要在那里有一个令人满意的空间.像TeX这样的算法需要很长时间才能完成.相比之下,现代Web浏览器中的算法仍然是原始的,但是开始做得更好.考虑以下:

你会看到句点之后的空间(略微)大于字间空间,应该是这样.

理由如何？你希望浏览器在句子之间放置额外的空格,而不是把它放在单词之间.这就是发生的事情:

无论如何,所以你想要更精细的控制,在你的网页上实现自己的排版愿景.以下 句子之间有四个字符:

您还可以使用Unicode中不同宽度的空格来获得所需的空间量(请参阅维基百科文章).

那么有没有办法自动完成？CSS有一个word-spacing属性,但没有sentence-spacing属性(实际上,即使用英语也不容易弄清楚"句子"是什么,在其他语言中则不那么容易).当然,在HTML中放置更多空格并不会有任何意义,因为HTML会将任何空白空间视为单个空格.因此,您将不得不编写一些代码,或者找到一个插件,该插件遍历页面中的文本并插入标记.或者,在CMS中添加插件或其他内容以吐出适当标记的代码.您这样做的替代方案是:

1. 添加 或组合不同宽度的Unicode空间.
2. 正如另一张海报建议的那样,使用span标签margin.
3. 作为上面的变体,使用一个<span class="sentence">带有CSS规则的元素.sentence::after { content: "\2002"; },其中2002是"en-space".这导致:

然而,最重要的是,网络不是一个印刷环境,尽管有许多值得努力推动它朝这个方向发展.根据您的目标,您可以考虑在高端文档准备环境中创建文档,并将其作为PDF发布.

Answer 2

如果您只是在寻找外观，您可以将句号放在 span 标签中并为其指定一些 CSS 属性，例如“margin-right: 5px;”。