javascript - 检测词溢出原因

Question

我有一个 <p> <div> 内的标签我已经设置了以下属性:

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

如果<p>标签包含大量文本，然后其中一些将被 chop 。

我的目标是检测未显示的第一个词是什么。

例如，在下面的场景中:

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>

该函数将返回单词“explode”。

我从this question知道很容易检测是否存在溢出，但我们能否更进一步，检测哪个词最先被隐藏？

Answer 1

经过多种方法我认为最简单的是一个接一个地添加单词，然后检查段落是否溢出:

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>

这实际上可能会提高以后的渲染速度，因为再也不会添加所有溢出的内容。