零宽度非中断空间

  • 本文关键字:中断 空间 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实体可以做到这一点,或者用另一种方法在不使用包装的情况下归档?

无中断空间与Word Joiner非常相似,就像它与Space非常相似一样。但每种都有非常不同的用法。所有这些变化都是为了表示空间字符的不同宽度和功能而存在的。

  • U+00A0无中断空格&nbsp;类似于空格字符表示,可防止自动换行
  • U+2007图形空间&#8199;一个与数字(0–9)字符大致相等的空间
  • U+202F窄无中断空间&#8239;&nnbsp;),用于在不指示单词边界的情况下将后缀与词干分离。大约是正常空间的代表性空间的1/3,尽管它可能因字体而异
  • U+2060Word Joiner&#8288;代表没有可见字符,它禁止在其位置换行

其他不间断字符

  • 不间断连字符(U+2011)
  • 图形空间(U+2007)
  • 窄无中断空间(U+202F)
  • 藏文标记分隔符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):防止字符之间的连接和草书连接,否则会进行其他方式的连接或草书连接。

  • 零宽度托梁(U+200D):鼓励连接和草书连接

参考文献:

  1. W3C Wiki:HTML字符用法
  2. HTML 4中的字符实体引用

此外:

  1. Unicode.org对U+00A0 NBSP的Word_Break属性值的更正
  2. Unicode v.3.2.0换行属性
  3. Unicode?提议?换行属性
  4. Unicode v7完整标准
  5. Jukka Korpela解释Unicode

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

最有效的方法是将img标签封装在nobr元素中:<nobr><img ...><img ...></nobr>。虽然不是任何HTML规范的一部分,并且在HTML5草案中提到"过时",但这种方法可以在浏览器中使用。如果你更愿意用一种更笨拙的方式来做那些在CSS被禁用时不起作用的事情,你可以使用一个人工包装器元素并在上面设置white-space: nowrap

尝试使用css属性white-space: nowrap;:将图像包装在span中

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

您可以访问此网站:Symbols-它提供了对许多特殊符号和字符的轻松访问。在页面底部,您会看到一个"Zero Width Space"字符的按钮,只需单击该按钮即可将"Zero Width Space"字符复制到剪贴板中。

最新更新