Detecting overflow content

Question

I've tried to find an answer for a long time but I didn't find anything.

I'm using contentEditable div to write a text exactly on 210x297mm page. When page ends javascript adds next one:

if(container.scrollHeight > container.clientHeight)
{
    page_number = page_number+1
    $('#editor').append('<div id="page_'+page_number+'" class="page" onkeyup="javascript:check_page(this);" contentEditable></div><div class="marginbottom"></div>');
    $("#page_"+page_number).attr("tabindex",-1).focus();
}

Everything works fine, unless I paste any longer text inside the div at the end of each page. Then only the part of the text apears and the rest goes outside div (and because of 'overflow: hidden' is invisible).

Is there any javascript/jquery method to detect overflow's content and move it into the next page (I didn't find it) or any CSS style that will allow me to separate the text inside each div? I've read about CSS3 multi-column and I need sth doing similar operations, but separating rows, not columns.

It looks like my answer could be what you are looking for. You will need to add the text and check for overflow before you actually render it, by adding visibility: hidden. And if it overflows (element.scrollWidth > element.offsetWidth) create a new page and increment the page_number. NOTES: - Access scrollWidth in jQuery like this $('#page')[0].scrollWidth - offsetWidth in jQuery would be $('#page').width() — Harry Theo
– Harry Theo, Commented Apr 12, 2019 at 18:04

Community · Accepted Answer · 2017-05-23 12:03:19Z

1

I think your best bet is to not use overflow: hidden but auto and try to detect with JavaScript if there's an overflow by checking for scroll height.

In this case you can dynamically start moving parts of the text (word by word maybe) until the content can fit the available space.

For some concrete techniques check this thread out for example: detect elements overflow using jquery

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 17, 2012 at 19:10

dain

6,7491 gold badge45 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1678401 Over a year ago

IMHO this solution is not really efective, but I'll try to use it. Isn't there any jQuery (or sth else) libraries that allows working with overflows in faster and less complicated way?

Pointy Over a year ago

@user1678401 the problem is that browsers don't really provide JavaScript with much insight into how inline content is rendered.

dain Over a year ago

@user1678401 agreed, it's a bit convoluted method but browsers are not designed for manual, paginated layouts. Let's hope Adobe's work around these more advanced CSS layout features will soon land in all browsers!

Collectives™ on Stack Overflow

Detecting overflow content

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related