jquery - 将文本限制为 div 的问题

Question

早些时候，我在这里得到了很好的帮助，解决了一些关于溢出文本的问题，以及如何将其放入新的 div 中。引用:Issues with text formatting after jQuery

现在我看到文本在不同浏览器(即 IE11 和 Chrome)中的显示方式有所不同。我知道这是正常的，但我想知道我可以在我的代码中更改什么以使它们显示相似。 您可以在 IE11 中查看 fiddle 的外观: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+' ');

我还更新了你的 fiddle :http://jsfiddle.net/hm2yfw61/23/

如果您对任何部分不清楚，请告诉我，我会尝试更详细地解释。