Zero-width non-breaking space

Question

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          


        

Answer 1

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.

The most effective way is to wrap the img tags in a nobr element: <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: nowrap on it.

Answer 2

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

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

Answer 3

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.

Answer 4

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.

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

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)

---

W3C recommends using the Word-Joiner whenever you need to connect two characters or words so that they do not wrap. ^[1]

To get the same functionality, formerly provided through the ZERO-WIDTH NON-BREAKING SPACE authors should use a WORD JOINER (U+2060) instead

However, no-where in the HTML4 Character Reference is Word-Joiner mentioned. ^[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.

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.

---

References:

1. W3C Wiki: HTML Character Usage
2. Character entity references in HTML 4

---

Further:

1. Unicode.org Correction of Word_Break Property Value for U+00A0 NBSP
2. Unicode v.3.2.0 Line Break Properties
3. Unicode ?Proposed? Line Breaking Properties
4. Unicode v7 Complete Standards
5. Unicode Explained by Jukka Korpela

---

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?

The test: http://codepen.io/dcdev/pen/LEOMLP

Results: No you can not.