JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
</div>
<div class="bottom">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,t has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
</div>
</div>
<div id="overflow"></div>
<div id="output">
<h4>Overflowing text:</h4>
<div id="textOverflowing"></div>
</div>
CSS
#container,
#overflow
{
height:200px;
width:300px;
border:5px solid #000;
position:relative;
}
.top
{
background:red;
min-height:100px;
width:300px;
}
.bottom
{
background:rgba(0,0,255,0.5);
width:300px;
}
#overflow{
position:fixed;
top:-9999px;
left:-9999px;
width:300px; /* updates in JS to accommodate scrollbar width */
}
#overflow > div{
width:300px;
}
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
#output{
position:absolute;
top:0;
right:0;
width:300px;
}
#textOverflowing{
color:red;
}
JavaScript
var overflowText = '';
var inner = $('#container').html();
$('#overflow').css('width',(300+scrollbarWidth)+'px').html(inner);
for(x=0;x < $('#overflow').find('.bottom').text().length; x++){
if(checkOverflow($('#overflow').get(0))){
var text = $('#overflow').find('.bottom').text();
overflowText = text.slice(-1) + overflowText;
$('#overflow').find('.bottom').text(text.substring(0, text.length - 1));
}else{
$('#textOverflowing').text(overflowText);
break;
}
}
// thanks to http://stackoverflow.com/a/143889/648350
function checkOverflow(el)
{
var curOverflow = el.style.overflow;
if ( !curOverflow || curOverflow === "visible" )
el.style.overflow = "hidden";
var isOverflowing = el.clientWidth < el.scrollWidth
|| el.clientHeight < el.scrollHeight;
el.style.overflow = curOverflow;
return isOverflowing;
}
// thanks to http://davidwalsh.name/detect-scrollbar-width
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
// Delete the DIV
document.body.removeChild(scrollDiv);