htmlcssline-breaks

Zero-width non-breaking space

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?

Solution

  • To keep two inline elements (like <img>) adjacent without any visible space or break, insert a Word Joiner (U+2060) &#8288; between them. This is the most semantically correct method:

    <img height="16" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'/>">&#8288;
<img height="16" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'/>">

    Recommended Characters for Controlling Breaks

    Unicode Name HTML Entity Width Function
    U+2060 Word Joiner &#8288; / &NoBreak; Zero Prevents line break at insertion point (invisible)
    U+00A0 No-Break Space &#160; / &nbsp; Normal Prevents line break where space normally occurs
    U+202F Narrow No-Break Space &#8239; / &nnbsp;¹ Narrow (⅓) Preferred in French punctuation & currency formatting
    U+2007 Figure Space &#8199; / &numsp; Digit-width Useful in tabular data where digits align vertically

    ¹ Only supported in HTML Living Standard, not HTML4.

    Script-Specific or Deprecated Characters

    Unicode Name Script Purpose
    U+0F0B Tibetan Mark Intersyllabic Tsheg Tibetan Canonical syllable delimiter in Tibetan
    U+0F0C Tibetan Mark Delimiter Tsheg Bstar Tibetan Rare, used in special contexts with headless stacks
    U+0E3A Thai Character Phinthu Thai Silent vowel diacritic
    U+0E4C Thai Character Thanthakhat Thai Cancels a consonant sound
    U+0E46 Thai Character Maiyamok Thai Repetition mark
    U+0E5B Thai Character Khomut Thai End marker in liturgical texts
    U+17D6 Khmer Sign Camnuc Pii Kuuh Khmer Sentence-final punctuation
    U+1735 Philippine Single Punctuation Hanunoo Traditional period
    U+1736 Philippine Double Punctuation Hanunoo Full-stop / section end

    Warning: These characters are script -dependent and not safe for general layout or web formatting. Using them outside their intended context may result in rendering issues or broken accessibility.

    Invisible/Control-Like Characters

    Unicode Name HTML Entity Use Notes
    U+200C Zero Width Non-Joiner (ZWNJ) &#8204; / &zwnj; Cursive script layout Prevents ligatures and connections
    U+200D Zero Width Joiner (ZWJ) &#8205; / &zwj; Emoji and ligature control Used in emoji sequences and ligature formations
    U+034F Combining Grapheme Joiner none Grapheme control Prevents character clusters splitting; not layout related
    U+180E Mongolian Vowel Separator (deprecated) (Do not use) Deprecated in Unicode 6.3; removed from HTML/CSS

    Standards Summary

    Character Unicode HTML4 HTML LS CSS / Web-Safe Notes
    Word Joiner U+2060 ❌ ✅ &NoBreak; ✅ Preferred invisible join
    NBSP U+00A0 ✅ ✅ &nbsp; ✅ Normal-width non-break
    NNBSP U+202F ❌ ✅ &nnbsp; ⚠️ Partial May not be supported widely
    ZWNJ / ZWJ U+200C / U+200D ✅ ✅ ⚠️ Use only for ligature logic
    U+180E ❌ ❌ ❌ Deprecated (Unicode 6.3)

    Accessibility & Internationalization Warning

    Avoid using non-standard script-specific delimiters for layout effects. These characters:

    References

    1. W3C: HTML Character Usage – Separators and Joiners
    2. HTML4 Entity Reference
    3. HTML Living Standard Named Characters
    4. Unicode TR #14 – Line Breaking
    5. Unicode Correction for NBSP Line Break Property
    6. Unicode 6.3 Update – U+180E Deprecation