JSFiddle - React, Tailwind, and code Playground

HTML

<p class="expl">Avec &amp;shy; entre certaines syllabes</p>
<div class="bloc" style="max-width:200px">
<p>Les mots hexa&shy;kosioihexe&shy;kontahexa&shy;phobie et hippo&shy;poto&shy;monstros&shy;esqui&shy;pédalio&shy;phobie sont beaucoup trop longs.</p>
</div>

CSS

body {
  font-family: sans-serif;
}
.bloc {
  margin-bottom: 1em;
  border: 1px dashed #aaa;
  padding: 0.5em;
  text-align: left;
}
h2 {
  color:#e03131;
  font-size:1.5em;
}
.expl {
  margin-bottom: 0.25em;
  font-weight: bold;
}