Jquery 限制文本为div的问题

早些时候，我在这里得到了很好的帮助，解决了一些关于溢出文本的问题，以及如何将其放入新的div中。参考：

现在，我看到了文本在不同浏览器（即IE11和Chrome）中显示方式的差异。我知道这很正常，但我想知道我能在代码中做些什么来让它们显示类似的内容。 您可以在IE11中看到小提琴的外观： 在这里，文本在我想要显示的区域上流动3-4行

对于实时测试，您可以在此处查看我的测试页面：-在IE11中显示奇怪。在Chrome中，它看起来更好，但我想说的是，在开始使用新的div之前，它可能会剪切到大部分文本

以下是我使用的jquery：

var currentCol = $('.box:first');
var text = currentCol.html();
currentCol.html('');
text = text.replace(/ (?![^<>]*>)/gi, '%^%');
var wordArray = text.split('%^%');



$.fn.hasOverflow = function() {
   var div = this[0]; 
   return div.scrollHeight>div.clientHeight;
};


for(var x=0; x<wordArray.length; x++){
    var word= wordArray[x];
    currentCol.append(word+' ');
    if (currentCol.hasOverflow()){
        currentCol = currentCol.next('.box');
    }
}

var currentCol=$（'.box:first'）；
var text=currentCol.html（）；
currentCol.html（“”）；
text=text.replace（/（？！[^]*>）/gi，%^%）；
var wordArray=text.split（'%^%'）；
$.fn.hasOverflow=函数（）{
var div=此[0]；
返回div.scrollHeight>div.clientHeight；
};
对于（var x=0；x我发现了您的问题。问题是您在添加单词后计算高度，因此您的UI已被破坏，文本位于DIV之外。您需要做的是删除最后插入的单词，然后将其添加到下一个适当的DIV中。以下是您需要在
if
中包含的代码：

    var currHtml = currentCol.html();
    currentCol.html(currHtml.substring(0, currHtml.length - (word.length + 1)));
    currentCol = currentCol.next('.box');
    currentCol.append(word+' ');

我还更新了你的小提琴：

如果您对任何部分不清楚，请让我知道，我将尝试更详细地解释。
您想如何处理溢出的文本，隐藏它，隐藏它（即使只显示半行），有卷轴吗？感谢@RohitAggarwal的回复。我希望它在一个新的分区中继续，就像我提供的示例一样。但是在像IE11这样的浏览器上，它在继续到下一个分区之前从第一个分区流出。在Chrome中，它继续到下一个分区，在分区底部留出一些空闲空间。Chrome问题我可以解决与一起生活。修复IE11中的溢出问题是最重要的。这看起来很有希望，但我正在努力找到放置此代码的正确位置？我应该将其添加到现有代码中，还是将其替换为现有代码的一部分？您可以从fiddle处获取整个JS，或者只获取我在此处编写的代码并将其替换为e代码写在
if
for

循环的

中。单个语句
currentCol=currentCol.next（'.box'）；
将被替换为我给出的4行。非常感谢！这解决了问题：）我只有一个后续问题：如何让文本提前几行断开，这样我就可以在“床单”的底部获得更多的自由空间？我尝试添加
填充底部：50px在css中，但这又把它搞砸了。我不认为有什么好办法可以做到这一点。我可以给出的建议是在计算溢出高度时，在
haswoverflow
中减去一个特定值（比如50）。这将对您有所帮助，或者尝试使用
边框底部：solid 50px 35; fff
来代替填充。非常感谢您的帮助！我将尝试使用
hasOverflow
。添加实心边框底部会打断某些背景着色：）