Html 零宽度不间断空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11392312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zero-width non-breaking space
提问by Pedro L.
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 but with zero width.
我想将两个图像保持连接，如果图像溢出，两者都应该转到新行，所以我需要的是类似 但宽度为零的东西。
Is there an html entity to do that or another way to archieve this without using a wrapper?
是否有一个 html 实体可以做到这一点，或者在不使用包装器的情况下以另一种方式对其进行归档？
采纳答案by Mariusz Jamro
Try to wrap the images in a span with css property white-space: nowrap;:
尝试使用 css 属性将图像包装在一个跨度中white-space: nowrap;：
<span style="white-space: nowrap;"><img ...><img ...></span>
回答by davidcondrey
The No-Break Space is very similar to a Word-Joiner, just as it's very similar to a Space. But each, has very different usages. All of these variations exist to represent different widths and functions of a space character.
No-Break Space 与 Word-Joiner 非常相似，就像它与 Space 非常相似一样。但是每个，都有非常不同的用法。所有这些变化都存在以表示空格字符的不同宽度和功能。
- U+00A0 No-Break Space
represented similarly to a space character, it prevents an automatic line break. - U+2007 Figure Space
 a space somewhat equal to the figures (0–9) characters. - U+202F Narrow No-Break Space
 or&nnbsp;) used to separate a suffix from a word stem without indicating a word boundary. Approximately 1/3 the representative space of a normal space though it may vary by font. - U+2060 Word-Joiner
⁠representative by no visible character, it prohibits a line break at its position.
- U+00A0 No-Break Space
表示类似于空格字符，它可以防止自动换行。 - U + 2007图空间
 的空间有所等于数字（0-9）字符。 - U+202F Narrow No-Break Space
 或&nnbsp;) 用于将后缀与词干分开而不指示词边界。尽管可能因字体而异，但它大约是普通空间的代表空间的 1/3。 - U+2060 Word-Joiner
⁠代表无可见字符，禁止在其位置换行。
Other No-Break Characters
其他不间断字符
- NON-BREAKING HYPHEN (U+2011)
- FIGURE SPACE (U+2007)
- NARROW NO-BREAK SPACE (U+202F)
- TIBETAN MARK DELIMITER TSHEG BSTAR (U+0F0C)
- 不间断连字符 (U+2011)
- 图形空间 (U+2007)
- 狭窄的无间断空间 (U+202F)
- 藏标分隔符 TSHEG BSTAR (U+0F0C)
W3C recommends using the Word-Joiner whenever you need to connect two characters or words so that they do not wrap. [1]
W3C 建议在您需要连接两个字符或单词时使用 Word-Joiner，以免它们换行。[1]
To get the same functionality, formerly provided through the ZERO-WIDTH NON-BREAKING SPACE authors should use a WORD JOINER (U+2060) instead
要获得以前通过零宽度非中断空间提供的相同功能，作者应改用 WORD JOINER (U+2060)
However, no-where in the HTML4 Character Reference is Word-Joinermentioned. [2]
但是，没有Word-Joiner提到HTML4 字符参考中的任何地方。[2]
In addition to these characters the SOFT HYPHEN (U+00AD)can be used to provide line-break hints within words that UAs might not have in their own hyphenation dictionaries.
除了这些字符之外，它们SOFT HYPHEN (U+00AD)还可用于在 UA 在其自己的连字词典中可能没有的单词中提供换行提示。
The only characters that are explicitly discouraged are ZERO WIDTH NON-JOINER (U+200C): prevents ligation and cursive connections between characters that would other wise ligate or join cursively. - ZERO WIDTH JOINER (U+200D): encourages ligation and cursive connections.
唯一明确不鼓励的字符是ZERO WIDTH NON-JOINER (U+200C)： 防止字符之间的结扎和草书连接，否则会以其他方式连接或草书连接。- ZERO WIDTH JOINER (U+200D)：鼓励结扎和草书连接。
References:
参考：
Further:
更远：
- Unicode.org Correction of Word_Break Property Value for U+00A0 NBSP
- Unicode v.3.2.0 Line Break Properties
- Unicode ?Proposed? Line Breaking Properties
- Unicode v7 Complete Standards
- Unicode Explained by Jukka Korpela
- Unicode.org 更正 U+00A0 NBSP 的 Word_Break 属性值
- Unicode v.3.2.0 换行符属性
- Unicode ？建议？换行属性
- Unicode v7 完整标准
- Jukka Korpela 解释的 Unicode
Test
测试
The question: Can I use a UNICODE space character to keep two images inline with each other when they would otherwise break to a new line?
问题：我可以使用 UNICODE 空格字符使两个图像保持内联，否则它们会换行吗？
The test: http://codepen.io/dcdev/pen/LEOMLP
测试：http: //codepen.io/dcdev/pen/LEOMLP
Results: No you can not.
结果：不，你不能。
回答by Jukka K. Korpela
There is no entity reference for ZWNBSP (zero-width no-break space) in HTML, but it, like any Unicode character, can be expressed using a character reference: (or, equivalently, ). However, it is ineffective for keeping images in the same line. Images are not characters, and browsers are not required to implement Unicode semantics for ZWNBSP even when used between characters. The same applies to WORD JOINER, U+2060.
HTML 中没有 ZWNBSP（零宽度不间断空格）的实体引用，但它与任何 Unicode 字符一样，可以使用字符引用来表示：（或等效地，）。但是，将图像保持在同一行中是无效的。图像不是字符，即使在字符之间使用时，浏览器也不需要为 ZWNBSP 实现 Unicode 语义。这同样适用于 WORD JOINER，U+2060。
The most effective way is to wrap the imgtags in a nobrelement: <nobr><img ...><img ...></nobr>. While not part of any HTML specification, and mentioned in HTML5 drafts as “obsolete”, this method works across browsers. If you would rather do things in a clumsier way that does not work when CSS is disabled, you can use an artificial wrapper element and set white-space: nowrapon it.
最有效的方法是来包装img标签的nobr元素：<nobr><img ...><img ...></nobr>。虽然不是任何 HTML 规范的一部分，并且在 HTML5 草案中被称为“过时”，但这种方法可以跨浏览器工作。如果您更愿意以一种在禁用 CSS 时不起作用的笨拙方式来做事，您可以使用人工包装元素并white-space: nowrap在其上进行设置。
回答by harryngh
You can go to this website: Symbols- it provides easy access to many special symbols and characters. At the bottom of the page, you see a button for "Zero Width Space" character, just click on that button to have the "Zero Width Space" character copied in the clipboard.
您可以访问这个网站：符号- 它提供了对许多特殊符号和字符的轻松访问。在页面底部，您会看到“零宽度空间”字符的按钮，只需单击该按钮即可将“零宽度空间”字符复制到剪贴板中。
