JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>

CSS

dd { 
  width: 55px;
  border: 1px solid black;
 }
dd.none {
  -moz-hyphens: none;
}
dd.manual {
  -moz-hyphens: manual;
}
dd.auto {
  -moz-hyphens: auto;
}