零宽度不间断空间

时间:2012-07-09 09:27:04

标签: html css

我有一段文字,最后我要插入两个图标。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris <img ...><img ...>

我想保持两个图像连接,如果图像溢出,则应该转到新行,所以我需要的是&nbsp;,但宽度为零。

是否有一个html实体可以做到这一点或其他方式来实现这一点而不使用包装器?

4 个答案:

答案 0 :(得分:21)

HTML中没有ZWNBSP(零宽度不间断空格)的实体引用,但它与任何Unicode字符一样,可以使用字符引用表示:&#xfeff;(或等效地,{{ 1}})。但是,将图像保持在同一行是无效的。图像不是字符,即使在字符之间使用,浏览器也不需要为ZWNBSP实现Unicode语义。这同样适用于WORD JOINER,U + 2060。

最有效的方法是将&#65279;标记包装在nobr elementimg中。虽然不是任何HTML规范的一部分,并且在HTML5草案中被称为“过时”,但此方法适用于各种浏览器。如果你宁愿以笨拙的方式做一些在禁用CSS时不起作用的事情,你可以使用一个人工包装元素并在其上设置<nobr><img ...><img ...></nobr>

答案 1 :(得分:20)

No-Break Space与Word-Joiner非常相似,就像它与Space一样。但每一种,都有着截然不同的用法。存在所有这些变化以表示空格字符的不同宽度和功能。

  • U + 00A0 无休息空间 &nbsp;与空格字符的表示方式类似,可防止自动换行。
  • U + 2007 数字空间 &#8199;一个有点等于数字(0-9)字符的空格。
  • U + 202F 狭窄的不间断空间 &#8239;&nnbsp;)用于将词缀与词干分开而不指示词边界。大约是正常空间的代表空间的1/3,尽管它可能因字体而异。
  • U + 2060 Word-Joiner &#8288;代表没有明显的字符,它禁止在其位置换行。

其他不休息字符

  • 不打破HYPHEN(U + 2011)
  • 数字空间(U + 2007)
  • NARROW NO-BREAK SPACE(U + 202F)
  • TIBETAN MARK DELIMITER TSHEG BSTAR(U + 0F0C)

W3C建议您在需要连接两个字符或单词时使用Word-Joiner,以便它们不会换行。 [1]

  

为了获得相同的功能,以前通过ZERO-WIDTH NON-BREAKING SPACE提供的作者应该使用WORD JOINER(U + 2060)而不是

但是,HTML4字符参考中没有提到的 Word-Joiner [2]

  

除了这些字符之外, SOFT HYPHEN(U + 00AD)还可以用来提供UA在自己的连字词典中可能没有的单词中的换行提示。

明确不鼓励的唯一字符是 ZERO WIDTH NON-JOINER(U + 200C):防止字符之间的连接和草书连接,否则将以其他方式连接或以粗俗方式连接。   - ZERO WIDTH JOINER(U + 200D):鼓励结扎和草书连接。


参考文献:

  1. W3C Wiki: HTML Character Usage
  2. Character entity references in HTML 4

  3. 此外:

    1. Unicode.org Correction of Word_Break Property Value for U+00A0 NBSP
    2. Unicode v.3.2.0 Line Break Properties
    3. Unicode ?Proposed? Line Breaking Properties
    4. Unicode v7 Complete Standards
    5. Unicode Explained by Jukka Korpela

    6. 测试

      问题:我是否可以使用UNICODE空格字符来保持两个图像彼此内联,否则它们会突破到新行?

      测试:http://codepen.io/dcdev/pen/LEOMLP

      结果:不,你不能。

答案 2 :(得分:9)

尝试使用css属性white-space: nowrap;包装图片:

<span style="white-space: nowrap;"><img ...><img ...></span>

答案 3 :(得分:1)

您可以访问此网站:Symbols - 它可以轻松访问许多特殊符号和字符。在页面底部,您会看到“零宽度空间”字符的按钮,只需单击该按钮即可在剪贴板中复制“零宽度空间”字符。