JSFiddle - React, Tailwind, and code Playground
HTML
<article>
<div class="left">
<p>Lucas ipsum dolor sit amet dantooine darth yoda binks hutt baba fisto dooku tatooine darth. Kessel endor gamorrean skywalker. R2-d2 lando baba jawa fett chewbacca solo. Hutt anakin tusken raider tusken raider chewbacca c-3po. Jar greedo moff organa antilles lando. Solo skywalker naboo maul bespin han yavin leia ponda. Mothma leia baba wicket. Palpatine kenobi wampa ahsoka leia darth amidala. Dooku dantooine hutt luke c-3p0 dooku. Lando mandalorians wampa obi-wan yavin jabba windu skywalker mothma.</p>
<p>Obi-wan kessel skywalker utapau darth luke ponda. Twi'lek ventress leia fett. Wicket skywalker darth calrissian leia. Lando fett c-3po darth skywalker tatooine skywalker ben darth. Hutt darth secura mace grievous antilles. Coruscant moff obi-wan padmé hutt. Antilles wookiee hutt darth fett jabba lars. Sith mon ackbar darth organa. Obi-wan darth c-3po darth obi-wan organa kessel anakin obi-wan. Sith moff solo sidious wicket hutt yoda yavin qui-gon. Mara jar wedge darth gonk ben ewok dantooine endor.</p>
<p>Fett ponda yoda wedge yavin. Darth greedo darth anakin skywalker owen skywalker. Jinn jango palpatine greedo solo luuke mara. Tatooine antilles antilles darth. Sidious antilles sith darth. Chewbacca sith solo solo grievous vader owen skywalker boba. Solo moff mon gonk. Skywalker solo antilles yoda dooku boba lando. Skywalker ventress darth ackbar. Skywalker skywalker wedge solo jango gonk calrissian maul. Antilles droid hutt grievous fett. Kit darth calamari darth. Hutt darth coruscant darth moff mace jade chewbacca.</p>
<p>Binks fett amidala c-3po owen watto wookiee darth. Yavin boba yoda hutt calrissian hutt skywalker biggs. Palpatine mara hutt gamorrean yavin palpatine moff luuke. Grievous calrissian leia hutt organa amidala dantooine moff gamorrean. Thrawn yavin ewok naboo organa moff. Jango moff hutt skywalker lobot moff chewbacca. K-3po fett yoda darth maul hutt moff. Lars maul yoda owen...
CSS
article {
}
div {
width: 45%;
}
article p {
}
.left {
float: left;
}
.right {
float: right;
}
JavaScript
var con = "<div><img src=\"http://lorempixel.com/300/300/cats\" /></div>",
maxH = $('.left').height()/2 + 150,
heights = [],
ctr = 0,
sideH = 0;
// Get all p heights
$('p').each( function( idx ) {
heights[idx] = $(this).height();
});
// Calculate how many ps make up the maximum height
while( sideH < maxH ) {
sideH += heights[ctr];
ctr++;
if (ctr > heights.length) break;
}
// This is the key
var diff = sideH - maxH;
console.log( "diff = " + diff );
// Get all remaining p
var breakUp = $('article p:eq('+(ctr-1)+')'),
remainingP = $('article p:gt('+(ctr-1)+')'),
clones = remainingP.clone(),
text = breakUp.text(),
text2 = text,
rowHeight = diff,
height = 0,
rowCount = 1,
flag = false,
breakingPoint = 0;
breakUp.css('background','red');
// Set the text of the element to one character
// to get the height of a single row.
breakUp.text('a');
rowHeight = breakUp.height();
breakUp.text('');
for (var i = 0; i < text.length; i++) {
var s = text.substring(i, i + 1);
breakUp.text(breakUp.text() + s);
height = breakUp.height();
if (height !== 0 && height !== rowHeight) {
rowHeight = height;
rowCount++;
if (rowCount > 6) {
flag = true;
breakingPoint = i;
break;
}
}
}
if (flag) {
text = breakUp.text();
while (true) {
text = text.substring(0, text.length - 1);
breakUp.text(text);
height = breakUp.height();
if (height < rowHeight) {
break;
}
}
var leftoverText = text2.substring( breakingPoint, text2.length - 1 ),
newParagraph = $('<p></p>');
newParagraph.html( leftoverText );
}
remainingP.remove();
$('.right').append( [ con, newParagraph, clones ] );