JSFiddle - React, Tailwind, and code Playground

by index

HTML

<div class="wordbreak">
  thequickbrownfoxjumpsoverthelazydog
</div>
<div class="wordbreak">
  the quick brown fox jumps over the lazy dog
</div>

<div class="wordwrap">
  thequickbrownfoxjumpsoverthelazydog
</div>
<div class="wordwrap">
  the quick brown fox jumps over the lazy dog
</div>

<div>
  <div class="overlapwrap">
   thequickbrownfoxjumpsoverthelazydogthequickbrownfoxjumpsover
  </div>
</div>
<div class="overlapwrap">
  the quick brown fox jumps over the lazy dog the quick browny
</div>

CSS

div {
  width: 100px;
  height: 75px;
  border: 1px solid blue;
  display: flex;
  background-color: #a7a7a7;
  margin-bottom: 2px;
}

.wordbreak {
  word-break: break-all;
}

.wordwrap {
  word-wrap: break-word;
}

.overlapwrap {
  overflow-wrap: break-word;
}

div > .overlapwrap {
  display: initial;
}