使用CSS在段落中的每个句号后添加两个空格?

pprl5pva  于 2023-03-14  发布在  其他
关注(0)|答案(5)|浏览(210)

如何使用CSS在段落中的每个句号后面加上两个空格?

0lvr5msh

0lvr5msh1#

啊,古老的“句号后的两个空格”模因又重新抬起了它丑陋的头。
句点后的两个空格属于打字机领域,或者等宽字体领域。我们很久以前就超越了它,从TeX开始,甚至更早。重点不是在句点后有一两个空格字符,而是在那里有一个令人满意的空间量。像TeX这样的算法花了很长时间来做这件事。相比之下,现代网络浏览器中的算法仍然很原始。但开始有所好转。请考虑以下几点:

您将看到句点后面的空格(稍微)大于单词之间的空格,这是应该的。
那么对齐的情况又如何呢?你可能希望浏览器把多余的空格放在句子之间,而不是放在单词之间。结果就是这样:

无论如何,你需要更细粒度的控制,以实现你自己的网页排版视觉。下面的句子之间有四个 字符:

您还可以使用Unicode中不同宽度的空格来获得您想要的空格量(请参见Wikipedia article)。
那么有什么方法可以自动完成这个过程呢?CSS有word-spacing属性,但是没有sentence-spacing属性(实际上,即使在英语中,也不容易弄清楚什么是“句子”,在其他语言中更是如此)。当然,在HTML中放置更多的空格不会有什么效果,因为HTML把任何一串白色都当作一个空格,所以你必须写一些代码,或者找一个插件,遍历页面中的文本并插入标记。添加一个插件或其他东西到你的CMS中,以输出适当标记的代码。你的替代方法是:
1.添加 或不同宽度Unicode空格的组合。
1.正如另一位发帖者建议的那样,将span标签与margin一起使用。
1.作为上面的一个变体,使用<span class="sentence">元素,CSS规则类似于.sentence::after { content: "\2002"; },其中2002是“en-space”。

然而,底线是web不是一个排版环境,尽管许多有价值的努力在推动它朝那个方向发展。根据您的目标,您可能会考虑在高端文档准备环境中创建文档,并将它们发布为PDF等。

eaf3rand

eaf3rand2#

句子后面的两个空格概念并不“难看”--事实上,恰恰相反。由于现代字体的字距调整以及网络浏览器现在支持的各种字体,有时很难确定一个句子是否已经结束,或者只是有一个单词需要一个句号来缩写,更不用说看起来总是连写了。用“胖”字母开始一个句子,比如大写字母“W”,它看起来就好像实际上根本没有空格一样。在一个句子后面添加一个额外的空格可以为读者提供清晰的分隔符。然而,我明白创建一个能够“理解”一个句子是什么的CSS是相当困难的,这样它就可以自动在每个句子后面插入一个额外的空格。

u0sqgete

u0sqgete3#

你可以把句号放在一个span-tag中,并给予它一些CSS属性,比如“margin-right:5 px;",如果它只是你正在寻找的外观。

v1l68za4

v1l68za44#

只有在标记(如<span>)上加上句号才能完成。例如:
www<span>.</span>google<span>.</span>com
那么css就是:

span:after{
   content : "  "; /*two spaces*/
}
nhaq1z21

nhaq1z215#

你也许想试试

<span>.</span>

和/或添加类...
然后在css中

span { margin-right: .5ch;}

ch代表字符(见https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units。5ch的意思是如果你在月经后留下一个规则的空格,我会这样做,如果只是为了让你的眼睛。
你可能想把句子格式化成单独的行

相关问题