检测导致溢出的词

Question

我有一个 <div> 里面包含一个 <p> 标签，我已经对这个 <div> 设置了以下属性：

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

如果 <p> 标签包含大量文本，则其中的一些文本将被截断。

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

例如，在以下场景中：

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了解到，检测溢出是否很容易，但我们能否更进一步，检测哪个单词是第一个被隐藏的？

- MarksCode

---

我脑海中有两种方法可以实现这个。当然，都是用js来完成的。首先，您需要获取父div的宽度，然后您可以将每个单词包装在<span>标签中，并迭代它们查看其位置，直到找到x坐标大于宽度的位置。第二种方法是创建另一个p元素，并逐字添加并检查其宽度，直到宽度大于父div的宽度。 - Mark E

谢谢Mark，我正在实现你的第二个建议。你认为逐个渲染单词并检查宽度会很耗费资源吗？ - MarksCode

不这么想。除非你要做成千上万次这样的操作，然后才能想出一个解决方案，而不需要寻找那个单词或者采用我的第一个建议，这样只需要一次渲染调用。顺便说一句，如果你成功编写了这个函数，我建议你将函数代码作为答案回答自己的问题，以帮助其他遇到同样问题的人。 - Mark E

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>

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

- Jonas Wilms