JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  This will not break loooooooooooooooong words that would fit in their own line.
</div>

<h4>word-wrap: break-word / overflow-wrap: break-word</h4>

<div class="container" style="word-wrap: break-word;">
  This will not break loooooooooooooooong words that would fit in their own line.
</div>

<div class="container" style="word-wrap: break-word;">
  This will break very loooooooooooooooooooooooooooooooooooooooooooooooooooong words.
</div>

<h4>word-break: break-all</h4>

<div class="container" style="word-break: break-all;">
  This will break loooooooooooooooong words that would fit in their own line.
</div>

<div class="container" style="word-break: break-all;">
  This will break very loooooooooooooooooooooooooooooooooooooooooooooooooooong words.
</div>

CSS

.container {
  font: normal 16px monospace;
  width: 15rem;
  border: 1px solid red;
  margin-bottom: 1rem;
}