将文本限制为div的问题

Question

早些时候，我在有关文本溢出以及如何将其纳入新的div的一些问题上获得了很好的帮助。 参考： jQuery之后的文本格式问题

现在，我看到通过不同的浏览器（即IE11和Chrome）显示文本的方式有所不同。 我知道这很正常，但是我想知道我可以在代码中进行哪些更改以使其显示相似。 您可以在IE11中看到其外观的小提琴： http : //jsfiddle.net/hm2yfw61/9/在这里，文本在需要显示文本的区域上流过3-4行。

对于实时测试，您可以在这里查看我的测试页面： http ://tangeland.net/brev/test.php-在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');
    }
}

谢谢！

Answer 1

我发现了你的问题。 问题是您要在附加单词之后计算高度，因此您的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+' ');

我还更新了您的小提琴： http : //jsfiddle.net/hm2yfw61/23/

如果您不清楚任何地方，请告诉我，我将尝试更详细地解释。