CODEWITHSUNDEEP
htmlcsstext
netdjw
netdjw

Reputation: 6007

Automatic column text wrapping in html

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?

Upvotes: 5

Views: 18122

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

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.

Upvotes: 3

user1187347
user1187347

Reputation: 328

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)

Upvotes: 8

Related Questions