Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatic column text wrapping in html

Tags:

html

text

css

Is there any way to text wrapping into two or more columns in HTML only with CSS?

I have continous text with p tags only like this:

<div id="needtowrap">
    <p>Lorem ipsum dolor sit amet, ...</p>
    <p>Nulla ullamcorper diam arcu, ...</p>
    <p>In libero diam, facilisis quis urna nec, ...</p>
    <p>Sed varius et mi quis dictum. ...</p>
</div>

I wan to wrap this text into two columns at 50% of the text, like in Microsoft Word or LibreOffice, etc.

It is possible?

like image 475
netdjw Avatar asked Dec 25 '22 02:12

netdjw


1 Answers

See the "column" rule:

http://www.w3schools.com/css/css3_multiple_columns.asp

As you can see, it's a CSS3 rule, and so you might not find browser support as complete as you'd like..

MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

Breakdown of browser support: http://caniuse.com/#feat=multicolumn

More reading, examples etc: http://css-tricks.com/guide-responsive-friendly-css-columns/ (fairly comprehensive)

like image 200
user1187347 Avatar answered Dec 27 '22 15:12

user1187347