JSFiddle - React, Tailwind, and code Playground

HTML

<p>Container breaking words</p>
<div class="container">
  <h2>Qui national simplificate anteriormente da, qui da publicava angloromanic</h2>
</div>

<p>Container nowrap (wrong solution, single line, out of container)</p>
<div class="container nowrapping">
  <h2>Qui national simplificate anteriormente da, qui da publicava angloromanic</h2>
</div>

<p>Container not breaking words</p>
<div class="container restorelines">
  <h2>Qui national simplificate anteriormente da, qui da publicava angloromanic</h2>
</div>

CSS

.container{
  width: 200px;
  margin-bottom:30px;
  border: 1px solid #ccc;
  background: #aaa;
  /* here the container is breaking words */
  word-break: break-all;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.nowrapping{
  white-space: nowrap;
}
.restorelines{
  word-break: unset;
  word-wrap: unset;
  overflow-wrap: unset;
  -webkit-hyphens: unset;
  -moz-hyphens: unset;
  -ms-hyphens: unset;
  hyphens: unset;
}