如果文本大于 div 高度，请使用 jQuery 检查

Question

我有一个固定高度和固定宽度的容器。其中我还有两个div，一个是顶部，另一个是底部，宽度固定。如果顶部的高度增加底部 div 内的文本超出容器的高度，我不希望这样。 我想知道有多少文本超出了容器高度以及该文本是什么。 我想将该文本保存在变量中。

我写的 jQuery 代码：

var conheight = $("#container").height();
console.log("conheight",conheight);

var botheight = $("#bottom").height();
console.log("botheight",botheight);

var topheight = $("#top").height();
console.log("topheight",topheight);

var heightdiff = conheight - topheight;
console.log("heightdiff",heightdiff);

var bottext = $("#bottom").html();
console.log(bottext);

if ( bottext.length > heightdiff ) {
   console.log("exceeded");
   console.log(bottext.length);
}
else {
    console.log("within div");
}

我不知道在if 标签里面写什么。

这是我到目前为止所做的小提琴链接。

http://jsfiddle.net/nTHzS/

任何帮助将不胜感激。

Answer 1

如果您知道 div 的宽度和底部框的宽度是固定高度，您可以使用此解决方案的组合来检测溢出 https://stackoverflow.com/a/143889/648350 以及您在 .slice(-1) 和 .substring(0, text.length - 1) 的循环中逐渐删除div 中的字符，直到不再溢出为止

我提供了一个 jsFiddle http://jsfiddle.net/nTHzS/3/

我将测试文本更改为 Lorem Ipsum 以更清楚地显示“溢出”返回的内容

编辑：在http://jsfiddle.net/nTHzS/6/ 更新了我的 jsfiddle 解决方案，该解决方案根据进一步解释请求的评论讨论从底部框中提供溢出文本。此解决方案使用来自http://davidwalsh.name/detect-scrollbar-width 的内容来检测滚动条宽度和来自https://stackoverflow.com/a/143889/648350检测内容溢出

EDIT2：修复了我在 for 循环中引用错误长度的错误。添加了减少整个单词而不是单个字符的溢出的功能，以停止破坏单词http://jsfiddle.net/nTHzS/10/

EDIT3：添加了代码测量顶部和底部的能力，具体取决于顶部是否有比容器更多的文本。 http://jsfiddle.net/nTHzS/11/