Click here to Skip to main content
15,120,739 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.

HTML
<div>
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
</div>


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.
Posted
Updated 25-Jan-21 3:43am

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[^]
Demo[^]


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[^]
   
Comments
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?
   
v2

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