Menu
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?
430
In short, In CSS specifically: widows = minimum number of lines in a paragraph split on the new page. orphans = minimum number of lines in a paragraph split on the old page.
The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column. In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page.
Use for flexibly removing widows I've added a non-breaking space between the words “wraps” and “here” which makes them behave as if they are a single word, rather than two that are separated by a space.
The most simple way to get rid of widows is to manually add a non-breaking space inside your HTML code. A non-breaking space acts as a glue between two words, and force them to be on the same line. A non-breaking space looks like this: .
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.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
