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)和{{的循环1}}逐渐删除div中的字符，直到它不再溢出

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

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

编辑：使用解决方案更新了我的jsfiddle http://jsfiddle.net/nTHzS/6/，该解决方案根据评论的讨论从底部框中提供了溢出的文本，进一步解释了请求..此解决方案使用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/

如果文本超过div高度，请使用jQuery检查

1 个答案: