JSFiddle - React, Tailwind, and code Playground

by silverwind

HTML

<p>overflow-wrap: normal</p>
<div class="d1">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>

<p>overflow-wrap: break-word</p>
<div class="d2">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>

<p>overflow-wrap: anywhere</p>
<div class="d4">My sister was recently diagnosed with <span>pseudopseudohypoparathyroidism</span></div>

CSS

div {
  width: min-content;
  max-width: 10em;
  background-color: #8ca0ff;
  padding: 5px;
  margin-bottom: 1em;
}

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


.d4 {
  overflow-wrap: anywhere;
}