JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<p style="width:200px" id=p> Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

JavaScript

var width = 200;
var p = document.getElementById('p');
var parent = p.parentNode;
var line = document.createElement('span');
line.style.display = 'inline-block';
line.style.visibility = 'hidden';
var content = p.innerHTML;
document.body.appendChild(line);
var start = 0;
var i = 1;
while (i < content.length) {
  line.innerHTML = content.substring(start, i);
  console.log(i + ' ' + content.length);
  if (line.clientWidth > width) {
    var newp = document.createElement('p');
    newp.style.width = width + 'px';
    newp.innerHTML = content.substring(start, i - 1);
    parent.insertBefore(newp, p);
    start = i - 1;
    i = start + 1;
  } else {
    i++;
  }
}
newp = document.createElement('p');
newp.style.width = width + 'px';
newp.innerHTML = content.substring(start);
parent.insertBefore(newp, p);
parent.removeChild(p);