How can i split the text into two columns in same length using javascript?

Question

I have used the code of below reference link for reading simulation.

I have created a box by using <div id="sim"></div>. it is working good, but now i have situated to change this into 2 columns in same length.

Q1: how to split the text into 2 columns?

Q2: And the reading cursor will travel down the column on the left, then down the column on the right.

For example:

If have entered around 100 words into the box, it will shows first 2 lines in first column, next 2 lines in 2nd column. After read these 4 lines, cursor should travel next 2 lines of 1st column, next 2 lines of 2nd column with autoscroll-x, autoscroll-y.

if it is possible to change, could someone help me?

Dude you should post all these as an answer and make some rep points :) — Jeremy Thille
– Jeremy Thille, Commented Jun 4, 2015 at 8:40

Community · Accepted Answer · 2017-05-23 12:14:24Z

4

You can do it with just CSS 3. The Multi column layout module defines column-count. Set it to 2 and it will A1. split the div in 2 and A2. have your cursor behave as expected.

https://jsfiddle.net/g9zsa86n/3/

#sim{
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

It's fairly well supported across browsers. If you use something like compass to write your css, it will actually be maintainable.

PS And as humble.rumble commented, to support ye olde browsers you can fallback to modernizer with a shim.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jun 4, 2015 at 8:46

Chris Wesseling

6,3962 gold badges39 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i split the text into two columns in same length using javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related