JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <p>Wrapped hyphenated-string</p>
</div>

<div class="container2">
  <p>This text is wrapped, but this <span class="nowrap">hyphenated-string</span> is not.</p>
</div>

<div class="container3">
  <p>This text is wrapped, but this hyphenated&#8209;string is not.</p>
</div>

CSS

.container,
.container2,
.container3 {
  position: relative;
  width: 80px;
  border: 1px solid black;
}
.container2 {
  top: 50px;
  width: 80px;
}
.container3{
  top: 100px;
  width: 80px;
}
.container2 p {
  white-space: normal;
}
.nowrap {
  white-space: nowrap;
}