35

I have a piece of text and at the end I want to insert two icons.

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 ...>

I want to keep the two images joined and if an image overflows both should go to the new line, so what I need is something like a &nbsp; but with zero width.

Is there an html entity to do that or another way to archieve this without using a wrapper?

4

4 回答 4

59

No-Break Space 与 Word-Joiner 非常相似，就像它与 Space 非常相似一样。但是每个都有非常不同的用法。存在所有这些变化以表示空格字符的不同宽度和功能。

  • U+00A0 No-Break Space &nbsp;表示类似于空格字符，它可以防止自动换行。
  • U+2007 Figure Space &#8199;一个与数字 (0–9) 字符相等的空间。
  • U+202F Narrow No-Break Space &#8239;或&nnbsp;) 用于将后缀与词干分开，而不指示词边界。尽管可能因字体而异，但大约是普通空间的代表空间的 1/3。
  • U+2060 Word-Joiner &#8288;代表无可见字符，禁止在其位置换行。

其他不间断字符

  • 不间断连字符 (U+2011)
  • 人物空间 (U+2007)
  • 狭窄的无间断空间 (U+202F)
  • 西藏标记分隔符 TSHEG BSTAR (U+0F0C)

W3C 建议您在需要连接两个字符或单词时使用 Word-Joiner，以免它们换行。[1]

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

但是，HTML4 字符参考中没有Word-Joiner提到任何地方。[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
于 2015-02-09T08:55:46.613 回答
27

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

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

于 2012-07-09T11:01:21.263 回答
14

Try to wrap the images in a span with css property white-space: nowrap;:

<span style="white-space: nowrap;"><img ...><img ...></span>
于 2012-07-09T09:30:40.050 回答
1

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

于 2018-03-13T09:59:02.487 回答