我有一段文本,最后我想插入两个图标。
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 ...>
我想保持两个图像的连接,如果图像溢出,两个图像都应该转到新行,所以我需要的是类似
但宽度为零的东西。
有没有html实体可以做到这一点,或者用另一种方法在不使用包装的情况下归档?
无中断空间与Word Joiner非常相似,就像它与Space非常相似一样。但每种都有非常不同的用法。所有这些变化都是为了表示空间字符的不同宽度和功能而存在的。
- U+00A0无中断空格
类似于空格字符表示,可防止自动换行 - U+2007图形空间
 
一个与数字(0–9)字符大致相等的空间 - U+202F窄无中断空间
 
或&nnbsp;
),用于在不指示单词边界的情况下将后缀与词干分离。大约是正常空间的代表性空间的1/3,尽管它可能因字体而异 - U+2060Word Joiner
⁠
代表没有可见字符,它禁止在其位置换行
其他不间断字符
- 不间断连字符(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):鼓励连接和草书连接
参考文献:
- W3C Wiki:HTML字符用法
- HTML 4中的字符实体引用
此外:
- Unicode.org对U+00A0 NBSP的Word_Break属性值的更正
- Unicode v.3.2.0换行属性
- Unicode?提议?换行属性
- Unicode v7完整标准
- Jukka Korpela解释Unicode
HTML中没有ZWNBSP(零宽度无中断空格)的实体引用,但它与任何Unicode字符一样,可以使用字符引用来表示:
(或等效地,
)。然而,它对于将图像保持在同一行是无效的。图像不是字符,即使在字符之间使用,浏览器也不需要为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"字符复制到剪贴板中。