如何解决孤儿/寡妇如何运作?
尝试以适当的布局打印一些网页内容(没有 1-2 行孤儿/寡妇),我无法获得任何预期的结果。
让我们考虑以下示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body
{
font-size: 2em;
width: 190mm;
}
p:before
{
content: "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Praesent eleifend dapibus felis,a consectetur nisl aliquam at. Aliquam quam augue,molestie a scelerisque nec,accumsan non metus. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Proin cursus euismod nisi,a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat.... ";
}
section
{
widows: 10;
orphans: 10;
}
</style>
</head>
<body>
<article class="section">
<p/><p/><p/>
</article>
<article class="section">
<p/><p/><p/>
</article>
<article class="section">
<p/><p/><p/>
</article>
</body>
</html>
当我在(例如)Chromium 中打开此文件时,我会将内容打印为 PDF 并打开该文件。
我们可以看到页面结束前3-4行开始的段落,以及页面开始后3-4行结束的其他段落。
我认为 orphans
和 widows
仅适用于具有该样式的元素的直接内容。然而现实生活中的需求恰恰相反:我们希望高级元素不要靠近新页面开始,而叶元素通常不那么重要。
我可能误解了这些样式的工作原理。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。