How to create a new div when content overflows over a fixed div height?

Question

CSS

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

HTML

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

How to create a new div when dynamic text overflows over a fixed div height?

Example:

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

When dynamic text overflows over a fixed div height, the content above will be displayed as follows.

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

I tried using the wordwrap function in PHP wordwrap($dynamic_text, 600, '</div><div class="page">'); , it may work, but she had a problem when the character was copied from Ms.Words. So, having found the overflowing text, cut it and then paste it into a new div element, this is the best solustion, I think. But I do not know how to do this using jQuery or Javascript.

Any ideas? Thanks in advance!

Answer 1

You can do this, and it's not just a couple lines of code. A couple of days it took a very experienced developer. Sorry, I can’t share this code.

Javascript: Put all content in a div. You can keep it hidden or out of the DOM for a while. Go through the diving children. Find one whose vertex + scrollHeight exceeds the height of the div. Spend it recursively. In the end, you will either find an indivisible element, for example, an image that does not fit, or a position in the node text to split the text into. Remove this part and all other elements from the div. Add them to a new one.

There are many details to apply, so it is not easy. But doable.

Answer 2

I just had something similar working today while I was looking for an answer, but there seems to be nothing special.

Although I use Array.reduce() you should be able to do this with Array.forEach() or any other iterative code that you like.

 words.reduce(function(acc, value) 

This is done by calculating whether the element will be full if we add another word to it before we actually represent it. The hacker thing here is to add another block element inside it with visibility: hidden .

 element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>'; 

Thus, the block element is still taking its parent dimensions, and the parent element can be checked for overflow.

A way to check for overflow is to compare the scroll height of an element with its height:

 if (element.scrollHeight > element.offsetHeight) 

If it overflows, we leave it as it is, create a new element and put the current value (word) in an iteration. Then we attach it to the same DOM tree as the previous element (as a parent child ... like a new brother 😜)

 var newPageEl = document.createElement('div'); newPageEl.classList = 'page'; newPageEl.textContent = word; parentElement.appendChild(newPageEl); 

Hope this makes sense.

 var page = document.getElementsByClassName('page')[0]; if (page.scrollHeight > page.offsetHeight) { // is overflowing fixOverflow(page); } function fixOverflow(element) { var words = element.textContent.split(' '); // delete previous text content element.textContent = ''; words.reduce(function(acc, value) { // store current element text var currentElementText = element.textContent.toString().trim(); var textToBeAdded = currentElementText + ' ' + value; element.innerHTML = '<div style="visibility: hidden; height: 100%; width=100%">' + textToBeAdded + '</div>'; if (element.scrollHeight > element.offsetHeight) { // is overflowing with the new word element.innerHTML = ""; // leave the last page element as is element.textContent = currentElementText; // create another element with the new value to be added // ** IMPORTANT replace the memory of the previous element variable element = createPageElement(value); // add it to the same DOM tree as the previous page element page.parentElement.appendChild(element); // could also be document.getElementById('page-container').appendChild(element); } else { // if not overflowing add another word element.innerHTML = currentElementText + ' ' + value; } }, ""); } function createPageElement(text) { // create element with class page var newPageEl = document.createElement('div'); newPageEl.classList = 'page'; newPageEl.textContent = text; return newPageEl; }