11

呈现句子之间应该出现的额外间距的最佳方式是什么（使用 [X]HTML+CSS）？

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

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

有哪些选择？下面有一些明显的，还有什么存在的？（CSS3 中的任何内容？）这些存在哪些缺点（如果有），包括跨不同的浏览器？（下面的不间断空格如何与换行交互？）

  • ..ipsum. &nbsp;Dolor..
  • ..ipsum.&nbsp; Dolor..
  • ..ipsum.&nbsp;&nbsp;Dolor..

网上有很多 FUD 声称这是为打字机发明的，但你可以在美国独立宣言等文件中看到它。（是的，我意识到你不应该遵循 200 多年前的所有惯例，DoI 只是一个方便的例子，展示了这早于打字机和等宽字体。）或者印刷商声称额外的空间会分散注意力——在改变之后背景颜色，因此示例不能是其他任何东西！

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

4

6 回答 6

13

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

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

在 IE 8 模式下的 IE 8 之前的 IE 中不支持此功能，在 3.0 之前的 Firefox 中也不支持此功能。

您也可以使用&emsp;or&ensp;表示一em或一en宽的空间。我不知道对这些的支持有多广泛，但它们似乎可以在 Mac OS X 上的最新 WebKit 和 Firefox 上运行。

两个&nbsp;字符的序列将防止该空格中的换行；这就是&nbsp;意思，不间断的空间。该序列A sentence. &nbsp;Another.导致&nbsp;出现在第二行，稍微缩进文本，这可能是不受欢迎的。该序列A sentence.&nbsp; Another.工作正常，带有换行符并且不添加任何额外的缩进，但如果您在对齐的文本中使用它，并且&nbsp;在行尾使用，它将阻止该行被正确对齐。&nbsp;用于写某人的名字的情况，例如Mr.&nbsp;Torvalds，或以 a 结尾的缩写.，其中印刷约定说您不应该将其分成几行，以免人们感到困惑并认为句子已经结束。

因此，使用序列 of&nbsp;是不可取的。由于这是一种风格效果，我建议使用white-space: pre-wrap, 并接受这种风格在不支持它的平台上会有点不理想。

编辑：正如评论中指出的，white-space: pre-wrap不适用于text-align: justify. 但是，我已经使用BrowserShots测试了一个不同实体的采样器（令人讨厌的广告，而且有点不稳定和缓慢，但它是一个非常有用的服务，它是免费的）。它看起来像各种各样的浏览器，在各种各样的平台上，支持和一些仍然不使用空格的浏览器，所以渲染还不算太糟糕，而且只有 Windows 2000 上的 IE 6 才真正使它们损坏, 作为盒子。BrowserShots 不允许我选择我想要的确切浏览器/操作系统组合，所以我不能在 XP 上选择 IE 6 来查看是否有任何不同。因此，只要您可以在 Win2K（可能还有 XP）上使用 IE 6 损坏，这是一个合理的答案。&ensp;&emsp;

另一种可能的解决方案是找到（或创建）一种具有“.”字符组合的字距调整对的字体，以将它们的字距调整得更远。目前所有主流浏览器都支持@font-face，包括 IE 回到 IE 5.5（尽管 IE 使用与其他浏览器不同的格式），使用自己的字体实际上变得合理，如果不使用则回退到用户默认字体支持不会破坏任何东西。

最后一种可能性可能是说服 CSS 委员会添加一个样式功能，该功能允许您指定您想要在句子末尾更宽的间距（这将由一个句号后跟一个空格来确定；首字母缩略词和缩写需要一个&nbsp;为了避免获得更宽的空间）。CSS 委员会目前正在讨论添加更高级的排版支持，因此现在可能是开始讨论此类功能的好时机。

于 2009-12-29T04:23:21.310 回答
6

对于所有“过时”和“仅限单一空间”的反对者 - 读一本书。&emsp;专业出版商在远古时代就在句子之间使用了单字，这就是等宽双空间标准的来源。从历史中吸取教训，而不是无事实根据地夸夸其谈。不过，我不得不承认，an&ensp;在大多数浏览器中看起来更好：&emsp;太宽了。你觉得这一段的可读性如何？Stackoverflow 的编辑器允许一些 HTML，我&ensp;在所有句子之间使用。

于 2013-09-17T19:48:13.540 回答
3

将每个句子包装在一个跨度中，并设置跨度的样式。（不是一个很好的解决方案）。

于 2009-12-29T04:51:20.707 回答
2

&nbsp;从语义上讲，它不是正确使用的字符。这是一个不间断的空格：一个不会用作换行符的空格。也许使用 a&ensp;或 single空格&emsp;，或者（我个人的建议）不要为页面上过时的双空格样式而烦恼。

于 2009-12-29T04:24:10.183 回答
2

只是想抛出，如果您的目标是覆盖默认的浏览器空白实现以提供“适当的”句子间距，那么对于什么构成适当的间距实际上存在一些争论。似乎双空格“标准”很可能只是打字机使用等宽字体时的遗留物。金钱报价：

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

除非您将此作为严格要求，否则尝试“修复”似乎不值得。（我意识到这不是对您提出的问题本身的回答，而是想确保您了解此信息，因为它可能会影响您在此上花费大量时间的决定。）

于 2009-12-29T05:17:14.663 回答
1

  是最糟糕的方法，因为它破坏了正当性。建议的预包装提供了粗略的控制，但不能证明是合理的。还有其他空间实体，例如 &thinspace; 和 &nspace; 以及一堆 Unicode 空格字符，它们应该可以提供更好的控制并且不应该破坏对齐。在我看来，这些实体是最好的非 CSS 解决方案。

为了更好地控制，您需要一个 CSS 解决方案。您可以跨越句子，这是显而易见的选择，也可以跨越句子之间的空间。后者对我来说似乎更不正确，但更容易实现，特别是如果您有常见的两个空格打字习惯 - 您可以简单地搜索并用空格周围的跨度替换所有 period-space-space。我有一些 javascript 可以为博主即时执行此操作。

不要使用盒子模型（padding-right），因为它会破坏完全对齐文本的右边距（即使没有完全对齐，也会导致行“提前”换行）。如果你跨越句子之间的空间，你可以改变这些元素的单词间距。如果要换行，可以将段落或其他容器设置为更大的字间距，并将句子设置为正常，或者您可以使用 after 选择器一步完成：

.your_sentence_class:after { content:" "; 字间距：0.5em；}

于 2012-12-27T21:28:12.260 回答