javascript - How to create new div when the content is overflowing past the fixed height of the div?

Question

CSS

.page{ 
      width: 275px;
      hight: 380px;
      overflow: auto;
     }

HTML

<div class="page">dynamic text</div>

How to create a new div when the dynamic text is overflowing past the fixed height of the div?

Example:

<div class="page">Some dynamic texts will appear here</div>

When the dynamic text is overflowing past the fixed height of the div, the content above will be appear like this.

<div class="page">Some dynamic</div>
<div class="page">texts will</div>
<div class="page">appear here</div>

I've tried using wordwrap function in PHP wordwrap($dynamic_text, 600, '</div><div class="page">'); it's can running, but it had a problem when the character was copied from Ms.Words. So, by detecting the overflowing text, cut it, and then paste it into the new div element is the better solustion, i guess. But, I don't know how to do this solution using JQuery or Javascript.

Any ideas? Thanks in advance!

Answer 1

You can do it, and it's way more than just a couple lines of code. It took a very experienced developer a couple days. Sorry, can't share the code.

Javascript: Put the whole content into the div. You may keep it hidden or out of the DOM for a while. Traverse the div's children. Find the one whose top+scrollHeight exceeds the div's height. Traverse it recursively. Eventually, you will either find an indivisible element, e.g., an image, that doesn't fit, or a position within a text node to split the text at. Remove that part and all further elements from the div. Add them to a new one.

There are a lot of details to address, so it's not simple. But doable.