句子间距

时间:2009-12-29 04:18:59

标签: html css typography spacing

在句子之间显示应该出现的额外间距的最佳方式是什么(使用[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声称这是为打字机发明的,但你可以在美国Declaration of Independence这样的文件中看到它。 (是的,我意识到你不应该遵循两百多年前的所有惯例,DoI只是一个方便的例子,显示了这种早期的打字机和等宽字体。)或者一位印刷师声称additional space is distracting - 之后改变背景颜色,所以示例不能是其他任何东西!

说白了,虽然我很欣赏有关是否应该使用额外间距的意见和讨论(这与编程无关),这不是我所要求的。假设这是一个要求,实现它的最佳方法是什么?

6 个答案:

答案 0 :(得分:13)

您可以使用white-space: pre-wrap来保留空格序列,同时仍然包装文本:

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

在IE 8模式下直到IE 8才支持此功能,在Firefox中也不支持这种情况。

您还可以将&emsp;&ensp;用于一个em或一个en宽的空格。我不知道这些支持有多广泛,但它们似乎适用于Mac OS X上最新的WebKit和Firefox。

两个&nbsp;个字符的序列将阻止该空格中的换行符;这就是&nbsp;的含义,不间断的空间。序列A sentence. &nbsp;Another.导致&nbsp;出现在第二行,稍微缩进文本,这可能是不可取的。序列A sentence.&nbsp; Another.工作正常,换行并且不添加任何额外的缩进,但如果您在对齐的文本中使用它,行末尾的&nbsp;,它将阻止该行合理的。 &nbsp;用于撰写某人的姓名,例如Mr.&nbsp;Torvalds,或以.结尾的缩写,其中印刷惯例表示您不应按行顺序将其拆分避免让人感到困惑,并认为句子已经结束。

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

修改:正如评论中所指出的,white-space: pre-wrap不适用于text-align: justify。但是,我已经使用sampler of different entities测试了BrowserShots(令人讨厌的广告,并且有点不稳定和缓慢,但它是一个非常有用的价格服务,这是免费的)。它看起来像各种各样的浏览器,在各种各样的平台上,支持&ensp;&emsp;,少数仍然不使用空格,因此渲染不是太糟糕,并且只有Windows 2000上的IE 6实际上会将它们作为盒子打破。 BrowserShots不允许我选择我想要的确切浏览器/操作系统组合,所以我不能在XP上选择IE 6来查看是否有任何不同。所以,只要你能在Win2K(也许还有XP)上使用IE 6,这就是一个看似合理的答案。

另一种可能的解决方案是找到(或创建)一个字体,该字体具有用于“。”字符组合的字距调整对,以便更广泛地区分它们。此时所有主流浏览器都支持@font-face,包括IE回到IE 5.5(虽然IE使用的格式与其他浏览器不同),使用自己的字体实际上变得合理,并且回归到如果不支持,则用户默认字体不会破坏任何内容。

最后的可能性可能是与CSS委员会讨论添加一种风格特征,该特征允许您指定在句子末尾需要更宽的间距(这将由一个句点后跟一个空格确定;缩略语和缩写需要&nbsp;才能避免获得更广阔的空间。 CSS委员会目前正在讨论增加更高级的排版支持,所以现在可能是开始讨论这种功能的好时机。

答案 1 :(得分:4)

对于所有你已经过时的&#39;和&#39;仅限单一空间&#39;反对者 - 读一本书。专业出版商在远古时代的句子之间使用了一个&emsp;,这就是等宽双空间标准的来源。从历史中学习,而不是在事实上毫无根据地发表修辞。不过,我必须承认,&ensp;在大多数浏览器中看起来更好:&emsp;太宽了。您如何看待本段的可读性? Stackoverflow的编辑器允许一些HTML,我在所有句子之间使用&ensp;

答案 2 :(得分:3)

在一个范围内包裹每个句子,或者设置范围的样式。 (不是一个很好的解决方案)。

答案 3 :(得分:3)

只是想扔掉那里,如果你的目标是覆盖默认的浏览器空白实现以提供“正确”的句子间距,那么实际上some debate就构成了适当的间距。似乎双倍空间“标准”很可能只是打字机使用等宽字体时的遗留物。钱报价:

  

底线:专业版   排字机,设计师和桌面   出版商应仅使用一个空格。   保存双倍空格   打字,电子邮件,学期论文(如果   你是时尚指南规定的   使用)或个人通信。   对于其他人,做任何事情   你感觉很好。

除非您将此作为严格要求,否则尝试“修复”似乎并不值得。 (我意识到这不是你所陈述的问题的答案,但是想确保你知道这些信息,因为它可能会影响你花很多时间在它上面的决定。)

答案 4 :(得分:2)

从语义上讲,

&nbsp;不是正确的字符。这是一个不间断的空间:一个不会用作换行符的空间。也许使用空格&ensp;或单&emsp;,或(我的个人推荐)不要打扰页面上过时的双空格式。

答案 5 :(得分:1)

&安培; NBSP;是最糟糕的方法,因为它扰乱了理由。如所建议的预包装给出粗略控制但不能证明是合理的。还有其他空间实体,如&amp; thinspace;和&amp; nspace;,以及一堆Unicode空格字符,应该提供更好的控制,不应该破坏理由。在我看来,这些实体是最好的非CSS解决方案。

为了更好地控制,您需要一个CSS解决方案。你可以跨越句子,明显的选择,或者你可以跨越句子之间的空间。后者对我来说似乎更不正确,但它更容易实现,特别是如果你有共同的双空间打字习惯 - 你可以简单地搜索并用空间周围的跨度替换所有周期空间。我有一些javascript可以为博主提供这样的功能。

不要使用盒子模型(padding-right),因为它会破坏完全对齐文本的右边距(即使没有完全对齐,也会导致行“早”换行)。如果你跨越句子之间的空格,你可以改变这些元素的字间距。如果你要包装句子,你可以设置你的段落或其他容器有更大的单词间距,并设置句子恢复正常,或者你可以使用后选择器一步完成:

.your_sentence_class:在{content:“”之后;字间距:0.5em; }