將文本限制爲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的問題

回答

相關問題