JSFiddle - React, Tailwind, and code Playground

by leethelobster

HTML

<p class="hi">
Loremipsumdolorsitamet,consecteturadipiscingelit.Aeneanfacilisisimperdietsem,euultricessapientempusfaucibusMorbiconsecteturrisusipsumidvulputatenequevehiculaat.Aeneaneuleoegetpurusporttitorinterdumvelveljusto.SuspendissesedrhoncusvelitVivamusacurnanonmaurisportavulputate.Sedacultricesodio,fermentumdictumnibh.Morbifaucibusnullacommodoliberoimperdietultrices.Quisquenondignissimneque,vitaeviverraerosLoremipsumdolorsitamet,consecteturadipiscingelit.Aeneanfacilisisimperdietsem,euultricessapientempusfaucibusMorbiconsecteturrisusipsumidvulputatenequevehiculaat.Aeneaneuleoegetpurusporttitorinterdumvelveljusto.SuspendissesedrhoncusvelitVivamusacurnanonmaurisportavulputate.Sedacultricesodio,fermentumdictumnibh.Morbifaucibusnullacommodoliberoimperdietultrices.Quisquenondignissimneque,vitaeviverraerosLoremipsumdolorsitamet,consecteturadipiscingelit.Aeneanfacilisisimperdietsem,euultricessapientempusfaucibusMorbiconsecteturrisusipsumidvulputatenequevehiculaat.Aeneaneuleoegetpurusporttitorinterdumvelveljusto.SuspendissesedrhoncusvelitVivamusacurnanonmaurisportavulputate.Sedacultricesodio,fermentumdictumnibh.Morbifaucibusnullacommodoliberoimperdietultrices.Quisquenondignissimneque,vitaeviverraeros
</p>

CSS

p {
  width: 200px;
}

JavaScript

/* 

text line wrapping 
given a long string with width of 300, cut string so it fits
do it on resize

*/

const width = document.querySelector('.hi').style.width;
console.log(document.querySelector('p'));