JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<p>
Vivamus in erat ut urna cursus vestibulum. Sed hendrerit. Etiam sit amet orci eget eros faucibus tincidunt. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nam pretium turpis et arcu. Aliquam erat volutpat. Nullam cursus lacinia erat. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam at tortor in tellus interdum sagittis. Phasellus gravida semper nisi.
</p>
<p id="test">
  Dummy content
</p>

<p id="result"></p>

CSS

#test {
    visibility: hidden;
}

div {
    border: 1px solid red;
}

JavaScript

const txt = "Vivamus in erat ut urna cursus vestibulum. Sed hendrerit. Etiam sit amet orci eget eros faucibus tincidunt. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nam pretium turpis et arcu. Aliquam erat volutpat. Nullam cursus lacinia erat. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Nam at tortor in tellus interdum sagittis. Phasellus gravida semper nisi."
const words = txt.split(' ');

const reference = document.getElementById('test');
const result = document.getElementById('result');
const height = reference.offsetHeight;
let div = document.createElement('div');

reference.innerHTML = '';
words.forEach((word) => {
  reference.innerHTML += word + ' ';
  if (reference.offsetHeight > height) {
  	reference.innerHTML = '';
    result.appendChild(div);
    div = document.createElement('div');
  }
  div.innerHTML += word + ' ';
});