CODEWITHSUNDEEP
css
Kyle Hotchkiss
Kyle Hotchkiss

Reputation: 11112

CSS3 Columns - Widows / Orphans

I've looking around to see if there have been any decent way of handling widows and orphans in CSS3 multi-columns, but have been disappointed to find none. I've tried the widow and orphan properties themselves, but they didn't do anything.

Does anybody know of a way to use CSS3 multi-columns and handle widows and orphans?

Upvotes: 14

Views: 5625

Answers (2)

PlayGod
PlayGod

Reputation: 366

An interim solution to this is to add

display: inline-block

to the block level element you wish to avoid breaking across columns. I recently needed this for <li> and <dl>. Works well for either.

Upvotes: 18

odinho - Velmont
odinho - Velmont

Reputation: 21514

The spec says the algorhitms should honor widows and orphans. Not sure how many do. But you can control some of it yourself by saying never break inside a p.

For that, you basically use

  • break-before
  • break-after
  • break-inside

They take values like auto which is default, and avoid and always. Plus a few extra.

Opera supports it, and you can find info here: http://www.opera.com/docs/specs/presto2.10/css/multicolumnlayout/

Upvotes: 4

Related Questions