How to divide text into columns, if I get text dynamically for database using Javascript and CSS?

Question

I think a script makes a certain number of characters in each container can work. Do you know any script like that? It is a responsive design I can use several css files but I need only one html file:

the problem is in text which I'll get dynamically so I have no idea how many characters I'll get. In desktop size the paragraphs are arranged one above the others. In Ipad size the paragraphs are arranged into two columns, some on right side and some on the left.

Answer 1

You can use CSS3's columns to achieve that task with CSS alone, though it is not supported in IE8 and below;

div {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 560px;
}

As a fallback for IE you can use conditional comments and something like jQuery Masonry or Columnizer as suggested by other posters.

Demo that gracefully degrades in IE.

Answer 2

There are som jquery plugins. For example: Columnizer