句子间距

Question

如何以最佳方式呈现应该在句子之间添加的额外间距（使用[X]HTML+CSS）？

<p>Lorem ipsum.  Dolor sit amet.</p>
               ^^ wider than word spacing

由于HTML和XML都需要空格折叠，因此上述两个空格必须被视为一个空格。

有哪些选项呢？以下是一些明显的选项，还有其他选项吗？（CSS3中有什么？）这些选项有什么缺点，包括在不同浏览器之间的表现如何？（下面的不间断空格如何与换行交互？）

• ..ipsum.  Dolor..
• ..ipsum.  Dolor..
• ..ipsum.  Dolor..

---

网络上有很多误传称这是为打字机发明的，但你可以在文献中看到它，例如在美国《独立宣言》中。（是的，我知道你不应该遵循200多年前的所有惯例，独立宣言只是一个方便的例子，它显示了这种方式早于打字机和等宽字体的出现。）或者一个印刷家声称多余的空格会分散注意力，然后改变背景色使示例不可能是别的！

坦白说，虽然我欣赏关于是否应该使用额外间隔的意见和讨论（这与编程无关），但这不是我要问的。假设这是一个要求，那么最佳实现方式是什么？

- Roger Pate

---

是的，在世界不同地区有不同的规则，我认为这是暗示我正在遵循指定的规则。 :) （唯一的缺点是由于HTML，我显然必须做出权衡。） - Roger Pate

这个“句号后面加两个空格的无聊规定”是在我们使用等宽字体和愚蠢输出设备时发明的。现代排版引擎会自动处理这个问题。不要覆盖它们的默认行为！ - Frank Krueger

Frank：《独立宣言》并非使用打字机排版，却使用了这种排版方式。不幸的是，我无法使用像TeX这样的现代排版引擎，我必须使用HTML。 - Roger Pate

Answer 1

您可以使用white-space: pre-wrap来保留空格序列，同时仍然换行：

<p style="white-space: pre-wrap;">Lorem ipsum.  Dolor sit amet.</p>

在IE 8模式下，直到IE 8，以及Firefox 3.0之前，此操作不受支持。

你也可以使用 或 来表示一个em或en的空格。我不确定这些东西的普及程度如何，但它们似乎在最新的Mac OS X上的WebKit和Firefox上可以正常工作。

两个 字符的序列将防止该空格中断换行；这就是 的含义：不间断空格。序列A sentence.  Another.会使 出现在第二行，稍微缩进文本，这可能是不希望看到的。序列A sentence.  Another.可以正常工作，不添加任何额外缩进并进行换行，但如果你在对齐文本中使用它，将 放在行末，将阻止该行正确对齐。 是为书写某人的名字而设计的，比如Mr. Torvalds，或以.结尾的缩写，在这种排版约定中，你不应该跨行拆分它，以避免人们感到困惑并认为该句子已经结束。

因此，使用 序列是不理想的。由于这是一种样式效果，我建议使用white-space: pre-wrap，并接受在不支持该样式的平台上样式会略微不理想的情况。

编辑：如评论中所述，white-space: pre-wrap不能与text-align: justify一起使用。但是，我使用不同实体的示例进行了测试，并使用BrowserShots （有些烦人的广告，并且有些不太可靠和缓慢，但对于免费的价格来说，它是一个非常有用的服务）。看起来相当多种类的浏览器，在各种平台上都支持 和 ，一些不支持的浏览器仍然使用空格，因此渲染效果也不错，只有Windows 2000上的IE 6实际上将它们呈现为方块。BrowserShots不允许我选择我想要的确切浏览器/操作系统组合，因此我不能选择在XP上运行的IE 6，以查看它是否有所不同。因此，只要你可以接受IE 6（可能是XP）的问题，这就是一个可行的解决方案。

另一个可能的解决方案是找到（或创建）一种具有“。 ”字符对的紧排对字形的字体，使它们之间的距离更宽。由于目前所有主要浏览器都支持@font-face，包括IE 5.5及以下版本（尽管IE使用与其他浏览器不同的格式），因此使用自己的字体实际上变得合理，并且如果不支持，则回退到用户默认字体

- Brian Campbell

---

这将禁用 text-align: justify，否则它似乎是最佳答案。 - Roger Pate

嗯，如果您关心精确的间距，为什么要使用justify呢？在这种情况下，我建议您在各种浏览器上测试 ，看看是否适合您。 - Brian Campbell

我使用对齐文本的其他原因，但句子间距仍应比单词间距更宽。 - Roger Pate

针对这些情况，你应该使用 "。" 而不是 "。 " 进行字距调整。我不能保证浏览器渲染引擎实际上会为这两组字符使用不同的字距调整；事实上，我相信 WebKit 根本不进行字距调整（我知道它不会为英文文本做连字）。因此，实际上，在浏览器对良好排版更加严肃认真，并愿意为此牺牲渲染速度之前，我认为并没有解决你问题的理想方案。 - Brian Campbell

我最初忽略了您在非句子结束符号后需要使用 nbsp 的要求。我认为，即使这样的解释需要特殊的 CSS 属性，出于实际原因，这也会破坏这样的提议。是的，在这个项目中，额外的渲染时间（我无法测量）甚至额外的带宽对我来说都不是问题。 - Roger Pate

Answer 2

对于那些认为使用单一间距和等宽字体陈旧过时的人——去阅读一本书吧。专业出版商从时间久远以来一直在句子之间使用单个   ，这就是等宽字体两个空格标准的来源。学习历史，而不是胡说八道没有事实依据的言论。不过我必须承认，在大多数浏览器中使用   看起来更好：   太宽了。你觉得这段话的可读性如何？Stackoverflow的编辑器允许一些HTML，我在所有句子之间使用  。

- Chris W.

---

这似乎更像是一条评论而不是一个答案... - Syon

@Syon，虽然有点啰嗦，但它似乎回答了这个问题：“使用 或者如果你认为它看起来不错，使用 ”。 - Ben Lee

这是一篇经过深入研究的文章，链接在此：http://www.heracliteanriver.com/?p=324。文章指出，在结束句号后使用em-quadrat（即双倍空格）已有数个世纪的历史，直到20世纪30年代左右。 - Brian M. Hunt

Answer 3

将每个句子都用标签包裹起来，并加入样式。这并不是一个很好的解决方案。

- Gazzer

---

我曾经考虑过这个问题，几乎将其包含在我的“显而易见的解决方案”列表中，但最终放弃了。然而，它目前是唯一建议的解决方案，满足要求并具有最少的演示缺点。（源代码缺点除外。）我在我的示例中使用了padding-right。 - Roger Pate

我很好奇为什么它被踩了，你能留下评论吗？ - Roger Pate

是的，即使它需要添加大量标记，但这个想法可能是当今最实用的解决方案。 - Brian Campbell

这很有趣，因为可能有一个语义上的原因来包装完整的话语（通常是一句话）在一个span中。对于学习外语、盲人读者等儿童来说，这可能会有所帮助。我不是说我会这样做，但我没有看到一个语义上的理由来彻底否定它。其他解决方案建议添加某种空格，既然我们已经在添加东西了，我想“为什么不这样做呢，因为你不会影响内容”。 - Gazzer

我遇到了嵌套标签的问题，但只是因为以前没有使用过这个，所以很容易解决。这实际上是一个内容问题，最好由字符而不是XML树来解决——就像单词之间的空格表示“单词结束，开始新的一段”一样，说“句子结束，在这里”，但emsp和相关的字符目前仍然不尽人意。我猜那个字符应该是句号，但它被过度使用以至于很难区分。无论如何，我已经在项目中实现了这个解决方案。 - Roger Pate

请参考http://hea-www.harvard.edu/~fine/Tech/html-sentences.html获取更完整的版本：`p { word-spacing: 0.25em; }, .sntc { word-spacing:0; }, 和 <p><span class="sntc">这是第一句话。</span><span class="sntc">这是第二句。</span></p>`。 - J. C. Salomon

Answer 4

  并不是一个正确的字符，从语义上讲。它是一个非断行空格：一个不会被用作换行的空格。也许可以使用一个空格和一个 或一个单一的 ，或者（我的个人建议）不要在您的页面上使用过时的双空格风格。

- nickf

Answer 5

只是想提出，如果你的目标是覆盖默认浏览器空格实现以提供“正确”的句子间距，则实际上存在一些争议关于什么构成适当的间距。看起来双空格“标准”最有可能只是传统打字机使用等宽字体的延续。重点引述如下：

“底线”：专业排版员、设计师和桌面出版商应仅使用一个空格。将双空格保留给打字、电子邮件、学期论文（如果您使用的样式指南规定）或个人信件。对于其他人，请随意做任何让您感觉良好的事情。

除非你有这个严格的要求，否则似乎不值得花费大量时间去尝试“修复”。（我意识到这并不是对你所说问题的回答，但我想确保你知道这些信息，因为它可能会影响你决定花费多少时间在此上。）

- Brian Moeskau

---

有趣的是，链接页面上的投票（目前14584票）中有47%的人支持额外的句子间距，另外还有8%的人每天使用或处理额外的间距（第三个选项）。 - Roger Pate

个人而言，出于习惯，我仍然在大部分写作中使用双倍行距。尽管我注意到，在即时通讯或使用iPhone打字时，为了节省按键次数，我已经改用单倍行距（不确定为什么我在其他媒体上仍然使用2倍行距...）。我认为现在这更多是一种风格问题，而不是正确性问题。我很想听听专业编辑对此的看法。 - Brian Moeskau

我阅读的各种资料都认为，在二战后，像杂志和图书出版商这样的公司为了节省纸张和成本而调整了许多以前的做法；而这种做法成为了今天的先例。虽然这种理由不适用于我（但并不明显，当然可以使用HTML进行打印布局），但我的受众与他们不同。 - Roger Pate

Answer 6

&nbsp; 是最糟糕的方法，因为它会破坏对齐。像建议的pre-wrap可以给予粗略的控制，但无法进行对齐。还有其他空格实体，例如&thinspace;和&nspace;，以及一堆Unicode空格字符，应该能够提供更好的控制，并且不会破坏对齐。在我看来，这些实体是最好的非CSS解决方案。

要获得更好的控制，您需要使用CSS解决方案。您可以跨度句子，这是显而易见的选择，或者您可以跨度句子之间的空格。我认为后者似乎更不正确，但更容易实现，特别是如果您有常见的两个空格键入习惯-您只需搜索并替换所有点空格空格与一个空格周围的跨度。我有一些JavaScript可以实时为博主完成此操作。

不要使用盒模型（padding-right），因为它会破坏完全对齐文本的右边距（即使没有完全对齐，也会导致行提前换行）。如果您跨度句子之间的空格，只需更改这些元素的单词间距即可。如果您打包句子，则可以设置您的段落或其他容器具有更大的单词间距，然后将句子恢复为正常状态，或者您可以使用after选择器一次完成：

.your_sentence_class:after { content:" "; word-spacing:0.5em; }

的意思是“在你的句子类结尾处插入一个空格，间隔为0.5em”。该代码片段与编程有关。

- thomasafine