零宽不间断空格

Question

零宽不间断空格

46

我有一段文本，想在最后插入两个图标。

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 实体可以实现此功能，或者还有其他方法可以实现而不使用包装器？

- Pedro L.

4个回答

28

在HTML中，没有ZWNBSP（零宽不换行空格）的实体引用，但是，像任何Unicode字符一样，可以使用字符引用来表示它：（或等效地，）。但是，它对于保持图像在同一行无效。图像不是字符，即使在字符之间使用ZWNBSP，浏览器也不需要实现Unicode语义。WORD JOINER，U+2060也是如此。

最有效的方法是将img标签包装在nobr元素中：<nobr><img ...><img ...></nobr>。尽管它不是任何HTML规范的一部分，并且在HTML5草案中被称为“过时”，但此方法适用于各种浏览器。如果您宁愿以更加笨拙、在CSS禁用时无法工作的方式进行操作，可以使用人造包装器元素，并在其上设置white-space: nowrap。

- Jukka K. Korpela

3

但是有一个字符：&zwj;，至少从2001年开始存在（来源：http://lists.w3.org/Archives/Public/www-international/2001OctDec/0028.html）。 - jthill

2

@jthill，“‍”表示零宽连接器U+200D，是一个不同的字符，旨在请求草书连接或连字渲染。 - Jukka K. Korpela

啊，谢谢您的纠正。我会去了解一下&zwnj;的相关知识。 - jthill

2

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - designcise

15

尝试使用具有CSS属性white-space：nowrap;的包装图像：

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

- Mariusz Jamro

2

是的，我知道，但我想问是否有任何方法可以在没有包装器的情况下完成这个任务。 - Pedro L.

2

经过测试其他方案，这似乎是解决方案。 - Pedro L.

2

您可以访问这个网站：符号 - 它提供了许多特殊符号和字符的易于访问。在页面底部，您会看到一个名为“零宽度空格”字符的按钮，只需单击该按钮即可将“零宽度空格”字符复制到剪贴板中。

- harryngh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- davidcondrey · Accepted Answer

不间断空格与连字号和空格非常相似，但它们各自有着非常不同的用途。所有这些变体都存在于表示空格字符的不同宽度和功能。

U+00A0 不间断空格   与空格字符类似，它可以防止自动换行。
U+2007 数字空格   是一种与数字（0-9）字符相等的空格。
U+202F 窄不间断空格   或 &nnbsp;) 用于在不指示单词边界的情况下将后缀与词干分开。约为普通空格的1/3，尽管可能因字体而异。
U+2060 连字号 ⁠ 由不可见字符代表，它禁止在其位置处进行换行。

其他不间断字符

不间断连字符（U+2011）
数字间距（U+2007）
窄不间断空格（U+202F）
藏文分隔符Tsheg Bstar（U+0F0C）

W3C建议使用Word-Joiner连接两个字符或单词，以避免换行。为了获得以前由零宽非断空格提供的相同功能，作者应该使用一个单词连接器（U+2060）代替。然而，在HTML4字符参考中，没有提到Word-Joiner。此外，软连字(U+00AD)可以用于提供单词内的断行提示。唯一明确不推荐使用的字符是零宽非连接符(U+200C)，它会防止字符之间的连字和草书连接。零宽连接符(U+200D)则鼓励连字和草书连接。

零宽不间断空格

其他不间断字符

参考资料：

更进一步：