JSFiddle - React, Tailwind, and code Playground
HTML
<div id='theDiv'>
</div>
<div id='theOtherDiv'>
</div>
CSS
#theDiv {
text-align: justify;
text-align-last: justify;
margin-bottom: -18px;
}
#theDiv:after {
content: "";
display: inline-block;
width: 100%;
}
#theOtherDiv {
background-color: #ffff00;
text-align: center;
}
JavaScript
$(function() {
var theText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit id mauris viverra tristique. Donec tempor nisl at urna consequat, sit amet hendrerit felis suscipit. Etiam aliquet felis id placerat rhoncus. Duis rutrum, turpis at gravida faucibus, nulla libero vestibulum nisl, et lobortis enim dui quis eros. Vestibulum vitae suscipit mi, at malesuada arcu. Duis a volutpat nunc. Aliquam consequat diam hendrerit arcu tempus, faucibus posuere massa aliquam. Phasellus sit amet gravida massa. Nam ornare mollis enim, ac convallis neque facilisis a. Aliquam at pretium nisl.'.replace(/\s+/, ' ');
function doIt() {
var theWords = theText.split(' ');
var divContent = theWords.map(
function (c, i, a) {
return '<span class="divWord">' + c + '</span>';
});
var theDiv = document.getElementById('theDiv');
theDiv.innerHTML = divContent.join(' ');
var divElementsHTML = theDiv.getElementsByClassName('divWord');
var divElements = [];
for (var i = 0; i < divElementsHTML.length; i ++) {
divElements.push(divElementsHTML[i]);
}
var sortedDivElements = divElements.sort(
function (e1, e2) {
r1 = e1.getBoundingClientRect();
r2 = e2.getBoundingClientRect();
if (r1.top > r2.top) return -1;
if (r1.top < r2.top) return 1;
return r1.left - r2.left;
});
var lastLineTop = sortedDivElements[0].getBoundingClientRect().top;
var sortedElementTops = sortedDivElements.map(
function (c, i, a) {
return c.getBoundingClientRect().top;
});
var theOtherDiv = document.getElementById('theOtherDiv');
theOtherDiv.innerHTML = '';
var...