JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div>
<p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p><p>This is a textbox that you can add text to suit your design and alter.This is a textbox that you can add text to suit your design and alter.</p>
</div>

CSS

div { display: block; width: 640px; height: auto; }
p { font-size: 24px; }

JavaScript

$('div').find('*').each(function(ti,tv){
  var c = parseInt( $(tv).css('font-size') ) / 2;
  c = Math.floor( c );
  c = ( c < 8 ? 8 : c );
  $(tv).css('font-size', c + 'px');
});

console.log($('div').outerHeight(true));