【发布时间】：2011-07-13 16:44:59
【问题描述】：
我环顾四周，看看是否有任何体面的方式来处理 CSS3 多列中的寡妇和孤儿，但没有找到。我自己尝试了widow 和orphan 属性，但它们什么也没做。
有人知道使用 CSS3 多列和处理孤儿的方法吗？
【问题讨论】：
-
检查当前浏览器支持：caniuse.com/css-widows-orphans.
标签： css
【发布时间】：2011-07-13 16:44:59
【问题描述】：
对此的临时解决方案是添加
display: inline-block
到您希望避免跨列中断的块级元素。我最近需要 <li> 和 <dl> 使用它。两者都适用。
【讨论】：
-
这个问题是项目符号点与内联块的底部对齐。你有解决办法吗？
-
@wu-lee 要删除项目符号，只需添加“list-style: none;”到 ul 标签。该解决方案适用于非列表项以及 div 等。谢谢！
规范说algorhitms should honor widows and orphans。不确定有多少。但是你可以通过说never break inside a p来自己控制其中的一些。
为此，您基本上使用
break-beforebreak-afterbreak-inside
它们采用默认值auto，以及avoid 和always。加上一些额外的。
Opera 支持它，你可以在这里找到信息：http://www.opera.com/docs/specs/presto2.10/css/multicolumnlayout/
【讨论】：
-
看来你只能强制新列或让它自动执行..似乎没有设置将寡妇/孤儿限制为两行或类似的东西
-
测试页面检查浏览器如何支持
orphans和widows列：quirksmode.org/css/css2/widows.html Chrome 支持，IE10 也支持，Firefox 24 不支持。 -
而且 Firefox 可能暂时不会支持它，考虑到错误历史...bugzilla.mozilla.org/show_bug.cgi?id=137367
-
与此相关的是，Opera 的 mstensho 目前正在修复 Blink（和 WebKit！）的多列代码，以使其与 Presto 一样出色。