零宽度不间断空格

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

不间断空格与单词连接器非常相似，就像它与空格非常相似一样。 但每种都有非常不同的用途。 所有这些变体的存在都是为了表示空格字符的不同宽度和功能。

• U+00A0 No-Break Space

   

  与空格字符类似，它可以防止自动换行。
• U+2007 图形空间

   

  稍微等于数字 (0–9) 个字符的空间。
• U+202F 窄不间断空格

   

  或

  &nnbsp;

  ）用于将后缀与词干分开，而不指示词边界。 大约为正常空间的 1/3，但可能因字体而异。
• U+2060 Word-Joiner

  ⁠

  代表不可见字符，禁止在该位置换行。

其他不间断字符

• 不间断连字符 (U+2011)
• 藏文标记分隔符 TSHEG BSTAR (U+0F0C)

---

W3C 建议在需要连接两个字符或单词以使其不换行时使用 Word-Joiner。 ^[1]

要获得相同的功能，以前通过零宽度非中断空间提供的功能，作者应该使用 WORD JOINER (U+2060) 来代替

但是，HTML4 字符参考中没有提到 Word-Joiner。 ^[2]

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

唯一明确不鼓励使用的字符是 零宽度非连接 (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

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 属性将图像包装在一个跨度中

white-space: nowrap;

:

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

Answer 4

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