问题
I'm rendering HTML documents to PDF. Previously I was using Wkhtmltopdf, but it looks like Dompdf offers better support for page breaks, so I expect I will switch to that.
I'd like to apply some orphan control to my document, so I need to have a solid understanding of what orphans actually does. From W3C (source):
The orphans property specifies the minimum number of lines in a block container that must be left at the bottom of a page.
The example that is consistently offered around the web is this:
p { orphans: 3; }
This means that if there isn't space for three lines of paragraph text, a break is forced to the next page. I am rendering a document containing a lot of unordered lists, so for me it would be:
li { orphans: 2; }
However, I'd also ideally like to break an unordered list so that a bullet item block is not orphaned or widowed on its own. It would be nice to be able to do this:
ul { orphans: 2; }
That would ideally ensure that no item block could appear above or below a page break on its own. However browser/renderer support for this is patchy, and W3C above use the word "line" rather than "block". Thus, I imagine the above would just affect paragraph line control within list items, and would not affect whole list item blocks. If that is the case, is there a CSS way to do this?
回答1:
As mentioned by liZe on the WeasyPrint issue tracker:
Orphans / Widows only work for line-boxes, not for block-like boxes.
Fortunately, you can define rules like:
li:last-child { break-before: avoid; } li:first-child { break-after: avoid; }
来源：https://stackoverflow.com/questions/18041146/should-css-orphan-operate-at-line-or-block-level