如果文本大于div高度,请使用jQuery进行检查

如果文本大于div高度,请使用jQuery进行检查,jquery,Jquery,我有一个固定高度和宽度的容器。其中我还有两个div,一个是顶部,另一个是底部,宽度固定。如果顶部的高度增加,则底部div中的文本超出容器的高度,我不希望这样。 我想知道有多少文本超出了容器的高度,这是什么文本。 我想将该文本保存在变量中 我写的jQuery代码: var conheight = $("#container").height(); console.log("conheight",conheight); var botheight = $("#bottom").height();

我有一个固定高度和宽度的容器。其中我还有两个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");
}
我不知道如果标签里面写什么

这是我到现在为止所做的事情


任何帮助都将不胜感激。

如果您知道div和底框的宽度都是固定高度,您可以使用此解决方案的组合来检测溢出,并使用.slice-1和.substring0,text.length-1循环来逐渐从div中删除字符,直到不再溢出为止

我提供了一个JSFIDLE

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

编辑:使用解决方案更新了我的JSFIDLE,该解决方案根据进一步解释请求的评论讨论从底部框中提供溢出文本。。此解决方案使用内容从检测滚动条宽度,使用内容从检测内容溢出

EDIT2:修复了我在for循环中引用错误长度的错误。。增加了一个功能,它减少了整个单词而不是单个字符的溢出,以防止单词中断


EDIT3:增加了代码测量顶部和底部的能力,这取决于顶部是否有比容器更多的文本

当机顶盒即将超出限制时,您希望发生什么?有滚动条吗?停止输出文本?将剩余文本移到底部框中?@haxxxton不,我不想要滚动条…我想要将该文本保存在变量中我建议查看,该变量必须有某种算法来检测溢出文本…@Bartdude我不想显示溢出文本..我想将溢出文本保存在变量中我完全理解它。我向您指出了一个方向,您可能会发现代码可以帮助您识别溢出的文本。你下一步做什么取决于你自己。所以不要使用这个插件,而是查看它并提取您需要的部分代码。那么顶部和底部框的高度都是可变的?你只想知道顶框什么时候会溢出文本?如果底部框中的文本太多,会发生什么情况?您需要知道两个溢出的文本集吗?不。我想要的是,如果顶部div中的文本增加,它将推动下面的div,然后底部div中的文本如果溢出,则剪切该文本并将该文本保存在新变量中。顶部div和底部div的高度都是可变的。。但是,如果两个框中的任何一个都有容器可以容纳的更多文本,会发生什么呢?在你的小提琴例子中。。如果还有30-40英尺的废话呢?您是否希望返回“蓝色”底部框的最后1或2行?我不担心顶部分区…我只想要bootom分区文本。是的…我检查了…但我不想显示溢出的文本…只需将文本剪切到容器高度。。。