CODEWITHSUNDEEP
javascriptjqueryhtmlcssoverflow
user1678401
user1678401

Reputation: 55

Detecting overflow content

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.

Upvotes: 2

Views: 335

Answers (1)

dain
dain

Reputation: 6689

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

Upvotes: 1

Related Questions