JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<!-- Use white-space: nowrap in stead of &nbsp; -->

<!-- wraps on hyphen. -->
<span>aaaaaaaaaaaaaa-bbbbbbbbbbbbbbbb</span>

<!-- doesn't wrap. -->
<span class='nowrap'>xxxxxxxxxxxxx-yyyyyyyyyyyyyyyy</span>

<!-- nbsp; won't prevent breacking on break characters (like a hyphen). -->
<span>foofoofoofoo&nbsp;barbarbar-NiNiNiNiNiNiNiNiNiNi<span>EkkieEkkieEkkie</span></span>

<!-- nbsp; is ugly. -->
<span>
    Follow&nbsp;me:&nbsp;<a href="#"><i class="fa fa-twitter">Some&nbsp;Icon</i></a> 
</span>

<!-- Readable code. -->
<span class='nowrap'>
    Follow me:
    <a href="#">
        <i class="fa fa-twitter">Some&nbsp;Icon</i>
    </a> 
</span>

CSS

.nowrap {
  white-space: nowrap ;
}