1

Earlier I have gotten good help here with some issues regarding overflowing text, and how to get this into new divs. Ref: Issues with text formatting after jQuery

Now I'm seeing differences in how the text is displayed through different browsers, i.e. IE11 and Chrome. I know this is normal, but I wonder what I can change in my code to get them to display similar. You can see the fiddle for how it looks in IE11: http://jsfiddle.net/hm2yfw61/9/ Here the text flows 3-4 lines over the area I want the text to be shown.

For a live test you can view my test page here: http://tangeland.net/brev/test.php - displays strange in IE11. In Chrome it looks better, but there I would say it maybe cuts to much of the text before it starts with a new div.

Here is the jquery I've used:

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');
    }
}

Thanks!

Community
  • 1
  • 1
Tngld
  • 153
  • 13
  • what do you want to do with the overflowing text, hide it, hide it (even when only half line is being displayed), have a scroll? – Rohit Aggarwal Oct 20 '14 at 10:54
  • Thanks for the response @RohitAggarwal. I want it to continue in a new div, as in the example i've providet. However on browsers like IE11 it flows out of the first div before it continues to the next. In Chrome it continues to the next a little bit to early leaving some free space at the bottom of the divs. The chrome issues I can live with. It is most important to fix the overflow issues in IE11. – Tngld Oct 20 '14 at 11:11

1 Answers1

2

I found your problem. The problem is that you are calculating the height after appending the word and hence your UI is already destroyed and text is outside DIV. What you need to do is remove the last inserted word and then append it into the next appropriate DIV. Here is the code you need to have inside if:

    var currHtml = currentCol.html();
    currentCol.html(currHtml.substring(0, currHtml.length - (word.length + 1)));
    currentCol = currentCol.next('.box');
    currentCol.append(word+' ');

I have also updated your fiddle: http://jsfiddle.net/hm2yfw61/23/

If you are unclear to any part, please let me know and i'll try to explain the same in even greater detail.

Rohit Aggarwal
  • 650
  • 7
  • 18
  • This looks promising, however I'm struggeling a bit with finding the right place to put this code? Should I add it to existing code, or replace it with part of existing? – Tngld Oct 20 '14 at 11:22
  • You can take the entire JS from fiddle, or you can take only the code I have written here and replace it with the code written inside `if` inside the `for` loop. The single statement `currentCol = currentCol.next('.box');` is to be replaced with 4 lines I gave. – Rohit Aggarwal Oct 20 '14 at 11:24
  • Thanks alot! That fixed the issue :) I only have one follow-up question: How can I get the text to break a few lines earlier, so that I get more free space on the bottom the "sheets"? I tried to add `padding-bottom: 50px;`in the css, but this just messed it up again. – Tngld Oct 20 '14 at 11:41
  • I don't think there would be a neat way to achieve that. The suggestion I can give is to subtract a particular value (say 50) in `hasOverflow` while calculating the overflow height. That will be able to help you, or instead of giving a padding, try giving a `border-bottom: solid 50px #fff`. – Rohit Aggarwal Oct 20 '14 at 11:46
  • Thanks alot for your help! I will try and play around with `hasOverflow`. Adding a solid border bottom breaks some of the background shading :) – Tngld Oct 20 '14 at 12:57
  • sure, let me know if you require any other help – Rohit Aggarwal Oct 20 '14 at 12:58