将文本限制为div的问题

早些时候，我在这里得到了很好的帮助，解决了有关溢出文本的一些问题，以及如何将这些问题转化为新的div。参考号：Issues with text formatting after jQuery 将文本限制为div的问题

现在我看到了文本在不同浏览器（即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'); 
    } 
}

谢谢！

来源

2014-10-20 Thorbj

你想对溢出文本做什么，隐藏它，隐藏它（即使只显示半行），滚动？ – 2014-10-20 10:54:41

感谢@RohitAggarwal的回复。我希望它继续在一个新的div，如我已提供的例子。然而在像IE11这样的浏览器中，它会先流出第一个div，然后继续下一个。在Chrome中，它继续下一步，提前在div底部留下一些空闲空间。我可以忍受的铬问题。修复IE11中的溢出问题是最重要的。 – Thorbj 2014-10-20 11:11:59

我发现你的问题。问题在于你在追加单词后计算高度，因此你的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/

如果你不清楚任何部分，请让我知道，我会尽力解释同样更详细。

来源

2014-10-20 11:17:11

这看起来很有前途，但是我找到了放置这段代码的正确位置，有点困难吗？我应该将其添加到现有代码中，还是将其替换为现有的一部分代码？ – Thorbj 2014-10-20 11:22:38

你可以从小提琴中取出整个JS，或者你可以只取得我在这里编写的代码，并用在'for'循环中'if'内写入的代码替换它。单个语句'currentCol = currentCol.next（'。box'）;'将被替换为我给出的4行。 – 2014-10-20 11:24:55

非常感谢！解决了这个问题:)我只有一个后续问题：我怎样才能让文本早些时候打破几行，以便在“表单”的底部获得更多可用空间？我试图在css中添加'padding-bottom：50px;'，但这只是把它搞乱了。 – Thorbj 2014-10-20 11:41:43

将文本限制为div的问题

回答

相关问题