2

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.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
user1678401
  • 55
  • 1
  • 7
  • It looks like my [answer](https://stackoverflow.com/a/55657250/7380613) 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 Apr 12 '19 at 18:04

1 Answers1

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

Community
  • 1
  • 1
dain
  • 6,475
  • 1
  • 38
  • 47
  • 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? – user1678401 Sep 17 '12 at 19:17
  • @user1678401 the problem is that browsers don't really provide JavaScript with much insight into how inline content is rendered. – Pointy Sep 17 '12 at 19:54
  • @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! – dain Sep 17 '12 at 22:46