0

I want inline icons to "stick" to their associated text, and to this end I am using U+2060 WORD JOINER to "join" the icon and the word following it.

The word joiner does not produce any space and prohibits a line break at its position.

This should ensure that, even with line wrapping, the icon doesn't get left stuck on its own at the end of a line. But it's not working (at least for me, on latest Chrome).

body {
  font-family: 'Meiryo', 'Verdana', sans-serif;
  line-height: 1.5;
}
#test {
  width: 200px;
  border: 1px solid black;
}
#test img {
  vertical-align: bottom;
}
<p id="test">You obtained a <img src="//via.placeholder.com/24" />&#x2060;MacGuffin!</p>

While I'm aware I could achieve this effect with HTML, such as using <nobr>, <span style="display: inline-block">, <span style="white-space: nowrap"> or several others, I would like to avoid adding HTML in this case. Mostly because, if the item name is more than one word, I still want the item to be able to wrap. I just want to ensure that there is no line break between the icon and the first word after it.

I could've sworn this used to work, so I don't know if it's an update to Chrome that broke it or I'm just remembering wrong. Or maybe it was never supposed to work? EDIT Can confirm it used to work January 16th 2020, as per my excited message on Discord telling my friends about it.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592

1 Answers1

0

hope this will do the trick:

It seems to work with any width I set the container to and will stay connected to what ever foo will be.

it-helped-me

rperdomo
  • 25
  • 1
  • 4