JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div class="oContainer" id="container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum volutpat ligula, sit amet bibendum magna luctus ac. In mi urna, varius et dictum et, pulvinar faucibus magna. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer ut pulvinar erat. Duis tempus felis id quam euismod id bibendum lectus commodo. Maecenas aliquam, velit at luctus fermentum, risus lectus posuere enim, quis porttitor risus eros eu orci. Praesent volutpat rhoncus libero id lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nunc leo, egestas sed aliquam vel, convallis a ligula.

Suspendisse sagittis mi at quam ultricies lobortis. Nunc hendrerit, mauris ut tempus dictum, erat velit feugiat mauris, quis vehicula turpis dui id metus. Phasellus nec quam quis augue molestie lacinia ut at nisl. Duis feugiat nibh id ante ullamcorper et elementum felis egestas. Donec et erat nec est rhoncus lobortis. Quisque vestibulum congue mi, vitae rhoncus dolor fringilla nec. Aliquam ut quam ipsum. Sed mattis, enim eu auctor vehicula, risus tellus hendrerit justo, eget facilisis sapien est elementum metus. Etiam malesuada volutpat commodo. Aliquam tellus lectus, tincidunt vel pharetra in, commodo sit amet risus. Mauris in libero magna. Maecenas non erat tortor. Phasellus ac dolor quam.

Nullam vel arcu eros, at lobortis elit. Nam vulputate dapibus libero, in pellentesque felis tempor id. In lectus eros, pellentesque et tincidunt quis, bibendum sit amet ligula. In hac habitasse platea dictumst. Fusce eget odio a urna tincidunt auctor a et tortor. Nam vitae turpis id purus fermentum sagittis id quis arcu. Suspendisse potenti. Nulla in euismod nisl. Phasellus quis orci arcu, eget commodo felis. Phasellus sed condimentum dui. Maecenas et congue magna. Mauris sagittis varius nisl, eu convallis odio lacinia at. Nunc varius suscipit mauris quis...

CSS

body {
	font-size: 16px;
}
.oContainer {
	height: 200px;
    overflow: hidden;
    padding: 5px;
    background: silver;
    line-height: 2em;
}
p {
    float: left;
}

JavaScript

var containerH = $(".oContainer").innerHeight();
var containerW = $(".oContainer").innerWidth();
var scrollHeight = $(".oContainer").prop("scrollHeight");
var contents = $(".oContainer p").html();
var visibility = $(".oContainer").css("visibility");
var wordCount = contents.match(/\s/g).length;
var lineHeight = $(".oContainer").css("line-height");
var textHeight = $(".oContainer").css("font-size");
var lines = contents.match(/\n/g).length;
lineHeight = new Number(lineHeight.replace("px",""));
textHeight = new Number(textHeight.replace("px",""));
var totalHeight = lineHeight/2 + textHeight;
var lineFit = Math.floor(containerH/totalHeight);
var totalLines = contents.match(/\n/g).length;
var splits = lineFit/totalLines;
var charLength = contents.length;
var six = 0;
var cIndex =0 ;
var strSt = 0;
$(".oContainer p").html("");
var textWidth = $(".oContainer p").width();
for (var i=0; i<charLength; i++) {
    if (textWidth < containerW) {
		$(".oContainer p").append(contents.charAt(i));
    }
    else if (six == 6) {
    $(".oContainer p").append("</p><p class='row'" + cIndex + ">");
        six = 0;
    }
    else {
    $(".oContainer p").append("\n");
        six++;
        console.log("text width " + textWidth);
    }
    textWidth = $(".oContainer p").width();
}


/* debugging code
console.log("splits " + splits);
console.log("total lines: " + totalLines);
console.log("word count " + wordCount); 
console.log("visibility: " + visibility);
console.log("container height: " + containerH);
console.log("scroll height: " + scrollHeight);
console.log("lines " + lines);
console.log("line height: " + lineHeight);
console.log("font-size: " + textHeight);
console.log("lines fit in container " + lineFit);
console.log("total height: " + totalHeight);
console.log("hidden Line: " + contents.lines);
End debugging code
*/