Automatic column text wrapping in html - html

Question

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?

Answer 1

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)

Answer 2

Multi-column layout in CSS with the columns property and related properties is rather well supported in modern browsers. At the very simplest, you would set just columns: 2 on the div element. In practice, you additionally need vendor prefixed versions for reasonable browser coverage:
#needtowrap {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
#needtowrap p {
margin: 0;
}
#needtowrap p + p {
text-indent: 1em;
}
<div id="needtowrap">
<p>Lorem ipsum dolor sit amet, ...
Well we need some real content too.
Otherwise this looks rather dull.</p>
<p>Nulla ullamcorper diam arcu, ...
And some more text to make this look like a paragragh.</p>
<p>In libero diam, facilisis quis urna nec, ...
By the way, fake Latin is not good fill text.
It behaves differently from the texts you will really use.</p>
<p>Sed varius et mi quis dictum. ...
But I digress.</p>
</div>
The example uses ”literary paragraph” formatting: instead of default vertical spacing between paragraphs, the first line of each paragraph except the first one is indented a bit. In multi-column rendering, this works much better than the default p formatting (which reflects defaults of office automation software rather than typographic traditions).
There are many other things to consider. As a rule, multi-column text usually looks much better when justified on both sides. This in turn makes hyphenation more or less a necessity.