JSFiddle - React, Tailwind, and code Playground

by Yusril Maulidan Raji

HTML

<div id="parent">
  <div id="child" class="wordwrap">
    Pneumonoultramicroscopicsilicovolcanoconiosis...
    
    With word-break: break-all every word will be broken, even little ones! With word-break: break-all every word will be broken, even little ones! 
  </div>
</div>

CSS

#parent {
  width: 500px;
  height: 500px;
  border: solid 1px;
  position: relative;
}

#child {
  position: absolute;
  top: 20px;
  left: 300px;
  border: solid 1px;
  text-align: justify;
}

.wordwrap {
  white-space: pre-wrap;
  /* CSS3 */
  white-space: -moz-pre-wrap;
  /* Firefox */
  white-space: -pre-wrap;
  /* Opera <7 */
  white-space: -o-pre-wrap;
  /* Opera 7 */

 
  word-break : break-word
}