检测字导致溢出答案

【问题标题】：Detect word the causes overflow检测字导致溢出
【发布时间】：2017-07-10 17:27:47
【问题描述】：

我在<div> 内有一个<p> 标记，我在其上设置了以下属性：

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 知道，如果有溢出很容易检测到，但我们可以更进一步，检测哪个单词是第一个被隐藏的吗？

【问题讨论】：

我想到了两种方法来实现这一点。当然都是用js。首先，您需要获取父 div 的宽度，然后您可以将每个单词包装在 <span> 标记中并迭代它们以查看它们的位置，直到您发现 x 坐标大于宽度。第二种方法是创建另一个 p 元素并逐字母添加检查宽度，直到宽度大于父 div。
谢谢马克，我只是在执行你的第二个建议。您认为一次渲染一个单词并检查宽度会很昂贵吗？
不这么认为。除非你要这样做数千次。然后，您可以为您的问题想出一个解决方案，该解决方案不涉及查找该单词或更改我的第一个建议，该建议只会进行一次渲染调用。顺便说一句，如果你成功编写了你的函数，我建议你用函数的代码回答你自己的问题，以帮助其他人解决同样的问题。

标签： javascript html css

【解决方案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>

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

【讨论】：