How do I keep paragraphs together in HTML columns?

Question

So, I have a page that looks like...

I am a monkey
I am a monkey too, with
additional information.
I am also a monkey

If I wrap this in CSS using the -webkit-columns:2 tag, it displays as...

I am a monkey               additional information
I am a monkey too, with     I am also a monkey

I'd like it to avoid splitting the paragraphs in this case.

I'm looking for something like "nobr" or a word-wrap feature or something... eeek. Any ideas?

(Later...) seems I can do this in Firefox, but not Chrome. Hmm...

It sounds like you're looking for what is called "widow/orphan" control in typography. — Gabe, May 28 '11 at 23:37
Does http://stackoverflow.com/questions/4742418/widow-orphan-control-with-javascript help? — Gabe, May 28 '11 at 23:44
What you're talking about is part of the [CSS Multicolumn Layout](http://www.w3.org/TR/css3-multicol/), specifically in the section [Column breaks](http://www.w3.org/TR/css3-multicol/#column-breaks). Unfortunately, support for these features seems to be bad at this point. Here's some analysis to that effect: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ — , Jun 10 '11 at 22:04

score 6 · Answer 1 · answered Sep 05 '13 at 13:18

6

You can set

p {
  display:inline-block;
}

which will prevent that paragraphs from breaking over a column break. May have some other strange effects though so have a good play with it first.

answered Sep 05 '13 at 13:18

Adam

1,059
9
15

1

Maybe a bit late, but I tried this and it didn't seem to do anything. – Mr Lister Jan 14 '14 at 19:27

score 6 · Answer 2 · edited May 23 '17 at 10:29

6

Try this:

-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;

The first should handle Chrome/Safari; the second Firefox. The third is the standards-compliant "correct" way.

H/t https://stackoverflow.com/a/7785711/1431728

edited May 23 '17 at 10:29

Community

1
1

answered Feb 13 '15 at 15:16

JohnK

6,865
8
49
75

...you essentially duplcated [this answer](https://stackoverflow.com/a/26530955/8112776) from a year earlier! (suprising nobody said anything!) – ashleedawg Oct 11 '22 at 10:39
@ashleedawg, and this one doesn't add any new information that anyone could possibly find helpful? – JohnK Oct 13 '22 at 15:58

score 3 · Answer 3 · answered Oct 23 '14 at 14:55

Although the question is answered, browser support for CSS columns is much better since this this question was first posted. The question is still pretty high in search results and the blog post referenced in the answer is pretty old too. So here's the quick answer: the best way to keep elements from breaking into columns is to use the break-inside property. For example:

p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

For more information, please see this entry on CSS Tricks.

score -1 · Answer 4 · answered May 31 '11 at 20:00

-1

What about using a table with invisible borders? Perhaps that may do the trick.

answered May 31 '11 at 20:00

Caffeinated

11,982
40
122
216

1

We're about to forget table-based designs. Embrace semantic web! – Zso Dec 28 '16 at 14:50

How do I keep paragraphs together in HTML columns?

4 Answers4