JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<div class="block-of-text" style="max-width: 550px; border: 1px solid red">
  One&#8209;two <span class="nowrap">Buckle&#8209;my&#8209;shoe, </span>
  <span class="nowrap">Three-four </span><span class="nowrap">Shut-the-door, </span>
  <span class="nowrap">Five-six </span><span class="nowrap">Pick-up-sticks, </span>
  <span class="nowrap">Seven-eight </span><span class="nowrap">Lay-them-straight, </span>
  <span class="nowrap">Nine&#8209;ten </span><span class="nowrap">Do&#8209;it&#8209;again.</span>
</div>
<br>
<div class="block-of-text" style="max-width: 550px; border: 1px solid green">
One&#8209;two Buckle&#8209;my&#8209;shoe, Three&#8209;four Shut&#8209;the&#8209;door, Five&#8209;six Pick&#8209;up&#8209;sticks, Seven&#8209;eight Lay&#8209;them&#8209;straight, Nine&#8209;ten Do&#8209;it&#8209;again.
</div>

</div>

CSS

.nowrap {
  /*&white-space: nowrap;*/
}