代码之家  ›  专栏  ›  技术社区  ›  Roger Pate

句子间距[关闭]

  •  11
  • Roger Pate  · 技术社区  · 15 年前

    呈现句子之间的额外间距的最佳方法是什么(使用[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 回复  |  直到 11 年前
        1
  •  3
  •   Gazzer    15 年前

    将每个句子用一个跨距括起来,并设置跨距的样式。(不是很好的解决方案)。

        2
  •  13
  •   Brian Campbell Dennis Williamson    15 年前

    你可以使用 white-space: pre-wrap 要保留空格序列,同时仍换行文字:

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

    在IE 8处于IE 8模式之前,在IE 8中不支持此功能,在3.0之前,在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; 是不受欢迎的。由于这是一种风格效果,我建议使用 空白:预包装 接受这种风格在不支持它的平台上会有点不理想。

    编辑 :正如评论中指出的, 空白:预包装 不适用于 text-align: justify . 但是,我已经测试了 sampler of different entities 使用 BrowserShots (令人讨厌的广告,有点古怪和缓慢,但这是一个相当有用的价格服务,这是免费的)。它看起来像是各种各样的浏览器,在各种各样的平台上,支持 &EnP; &EMSP; ,一些仍然不使用空格,因此渲染效果并不太差,而且只有Windows2000上的IE6实际将它们渲染为方框。浏览器快照不允许我选择我想要的确切的浏览器/OS组合框,所以我不能在XP上选择IE6来查看是否有任何不同。所以,这是一个合理的答案,只要你能与IE6在win2k(也许是xp)中断。

    另一个可能的解决方案是找到(或创建)一个字体,该字体有一个“紧排”对。字符的组合,以使它们更广泛地分开。与 @font-face 此时对所有主要浏览器的支持,包括IE返回IE5.5(尽管IE使用的格式与其他浏览器不同),使用自己的字体实际上变得合理,如果不支持,返回用户默认字体不会破坏任何内容。

    最后一种可能是说服CSS委员会添加一个样式特性,该特性允许您指定希望在句尾使用更宽的间距(由句点后跟空格决定;首字母缩略词和缩写词需要 &nbsp; 为了避免得到更大的空间)。CSS委员会目前正在讨论添加更高级的排版支持,因此现在可能是开始讨论此类功能的好时机。

        3
  •  4
  •   Chris W.    11 年前

    对于所有“过时”和“单一空间”的反对者来说,阅读一本书。专业出版商使用了 &emsp; 古时的句子之间,这就是单空间双空间标准的由来。从历史中学习,而不是在事实上毫无根据的情况下发表言论。不过,我必须承认, &ensp; 在大多数浏览器中看起来更好: &EMSP; 太宽了。你觉得这段的可读性如何?StackOverflow的编辑器允许一些HTML,我正在使用 &EnP; 在所有句子之间。

        4
  •  3
  •   Brian Moeskau    15 年前

    如果您的目标是重写默认的浏览器空白实现以提供“正确”的句子间距,那么实际上 some debate 至于什么构成了适当的间距。似乎双空格“标准”最有可能只是打字机使用单空格字体时的遗留物。货币报价:

    底线 专业人员 排字机、设计师和桌面 发布服务器只能使用一个空间。 为保存双空格 打字、电子邮件、学期论文(如果 按照你的风格指南 使用)或个人通信。 对于其他人,做任何事情 你感觉很好。

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

        5
  •  2
  •   nickf    15 年前

    &nbsp; 从语义上讲,使用的字符不正确。它是一个不间断的空间:一个不会被用作换行符的空间。也许用一个空间 &ensp; 或者一个 &emsp; 或者(我个人的建议)不要为页面上过时的双空间样式操心。

        6
  •  1
  •   thomasafine    12 年前

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

    为了更好地控制,您需要一个CSS解决方案。你可以跨越句子,这是显而易见的选择,或者你可以跨越句子之间的空间。后者对我来说似乎更不正确,但更容易实现,特别是如果您有常见的两个空格输入习惯-您可以简单地搜索并用一个空格周围的空格替换所有的句点空格。我有一些JavaScript可以为博主即时完成这项工作。

    不要使用方框模型(向右填充),因为它会破坏完全对齐文本的右边距(即使没有完全对齐,也会导致行“提前”换行)。如果你跨越句子之间的空格,你可以改变这些元素上的单词间距。如果要包装句子,可以将段落或其他容器设置为具有更大的单词间距,然后将句子设置回正常值,或者可以使用后面的选择器在一个步骤中完成:

    .您的句类:在内容之后:“”;字间距:0.5em;