Question

早些时候，我在这里得到了很好的帮助，其中包含有关溢出文本的一些问题，以及如何将其转换为新的div。参考：Issues with text formatting after 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/

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

将文本限制为div的问题

1 个答案: