Detect word the causes overflow

Question

I have a <p> tag inside a <div> which I've set the following properties on:

div {
   height: 105px;
   width: 60px;
   overflow: hidden;
}

If the <p> tag contains a lot of text then some of it will be cut off.

My goal is to detect what the first word not being shown is.

For example, in the following scenario:

div {
  height: 105px;
  width: 60px;
  overflow: hidden;
}

<div>
   <p>People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people.</p>
</div>

the function would return the word "explode".

I know from this question that it is quite easy to detect if there's an overflow, but can we take this one step further and detect which word is the first to be hidden?

Answer 1

After multiple approaches i think the easiest is adding one word after another, then check if the paragraph overflows:

window.onload=function(){

var el=document.getElementById("el");
var words=el.textContent.split(" ");
el.textContent="";

var thatword=words.find(function(word,i){
   el.textContent+=(i?" ":"")+word;
   //console.log(el.clientWidth,el.scrollWidth,el.clientHeight,el.scrollHeight);
   return el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;
});

alert(thatword);

};

#el {
  height: 105px;
  width: 60px;
  overflow: hidden;
}

<div>
   <p id="el">People assume I'm a boiler ready to explode, but I actually have very low blood pressure, which is shocking to people.</p>
</div>

This may actually improve rendering spead later as all overflowing content is never added again.