Click here to Skip to main content
15,666,947 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I want to split dynamic div content into two div content with specific height using jQuery or JavaScript?

for example here you can see 10 number will come and want to split into two divs. i am using dummy content here but any content will come so how we can do this? please help. thanks in advance.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam eget massa eu commodo. Vivamus pharetra ante in orci pharetra, vitae pulvinar dolor viverra. Vestibulum massa metus, pretium ut elementum quis, molestie et quam. Sed vitae nisi lobortis, condimentum orci sed, hendrerit elit. Ut erat mauris, posuere a metus vitae, accumsan tincidunt risus. Nulla nec semper nisi. Maecenas pellentesque, lacus nec egestas luctus, nunc ipsum tempor eros, a vulputate nunc ligula id purus. Etiam vitae ipsum sollicitudin, tincidunt neque ac, fringilla augue. Donec facilisis et nisi eu interdum. Pellentesque et ex diam. Pellentesque in magna auctor, ornare erat a, blandit enim

What I have tried:

I have tried with jquery find height of div but didn't get any solution how i can split content one div to two div without overflow or cutoff text at bottom of the div.
Updated 13-Jan-22 8:41am

That depends what you're trying to do.

If you want to split the content across multiple columns, then use the CSS multi-column layout:
columns - CSS: Cascading Style Sheets | MDN[^]
Basic Concepts of Multicol - CSS: Cascading Style Sheets | MDN[^]
Handling Overflow in Multicol - CSS: Cascading Style Sheets | MDN[^]

Actually flowing content into different elements is much more complicated. There was an old (2014) proposal from Adobe, which was never supported by any real browsers:
CSS Regions Module Level 1[^]
Can I use... CSS Regions[^]

There were many problems with the proposal:
CSS Regions Considered Harmful – A List Apart[^]
Share this answer
Member 9927163 25-Jan-21 7:12am    
Hi, thanks for your support, but i want to use jquery or javascript to split content into two induvial div. because in dynamic content html data will come. like , etc.
example: suppose we have one div with 100px height, after fill 100% height(over flow is hidden) of div, i want to split more content into other div, so div is not scrollable. so i am confused how i can exact find character or word which i split content from.
If you wrap your <div> in another <div> then you can use javascript to modify the innerHML of the outer <div> to create whatever internal elements with whatever properties and content you wish.

Getting the current height has a number of solutions.[^] - but why not set it to height="auto" and let nature take it's course?
Share this answer
TLDR: this is not for multiple columns, just 2 columns.

Hope this helps whoever comes across this in the future as I had this same problem. I was fortunate enough to have a character limit, but here goes nothing:

Here is the data:

content={text: 'Lorem ipsum dolor sit amet, consectetur ano adipiscing elit. In tincidunt erat massa, siti amet posuere risus faucibus in. Nullano aliquam tortor eueget dictum ligula inosan ela sodals.'}

// it doesn't look like it but there are spaces in the split and join below
const textAsWordArray = content.text.split(' ').join(' ');

// getting the char count of the text
const charCount = content.text.split('').length;

let leftText;
let rightText;

// 185 is the total char count so I'm doing less than half
if(charCount > 90){
const wordCountHalved = Math.floor(textAsWordArray.length/2);
leftText = textAsWordArray.slice(0, wordCountHalved);
rightText = textAsWordArray.slice(wordCountHalved, textAsWordArray.length)
} else {
leftText = content.text

And then your two containers with left and right text variables accordingly
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900