零宽度不间断空间

Question

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

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实体可以做到这一点或其他方式来实现这一点而不使用包装器？

Answer 1

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

• U + 00A0 无中断空间  与空格字符类似,它可以防止自动换行.
• U + 2007 图  空间有点等于数字(0-9)字符的空间.
• U + 202F 窄 间隙 或&nnbsp;用于将后缀与字干分开而不指示字边界.大约是正常空间的代表空间的1/3,尽管它可能因字体而异.
• U + 2060 Word-Joiner ⁠代表没有可见字符,它禁止在其位置换行.

其他不休息的人物

• 不打破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)代替

但是,没有Word-Joiner提到HTML4字符参考中的任何位置.^[2]

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

明确不鼓励的唯一字符是ZERO WIDTH NON-JOINER (U+200C):防止字符之间的连接和草书连接,否则将以其他方式连接或以粗俗方式连接.- ZERO WIDTH JOINER (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

测试

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

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

结果:不,你不能.

Answer 2

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

最有效的方法是将img标签包装在一个nobr元素中:<nobr><img ...><img ...></nobr>.虽然不是任何HTML规范的一部分,并且在HTML5草案中被称为"过时",但此方法适用于各种浏览器.如果您希望以无用的方式执行某些在禁用CSS时无效的方法,则可以使用人工包装元素并对其进行设置white-space: nowrap.

Answer 3

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

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