什么是css中的孤儿和寡妇？

Question

我以前从未见过如下（在bootstrap模板中看到）：

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

那么，孤儿和寡妇是为了什么？

Answer 1

在排版中，“寡妇”是出现在新页面开头的段落的最后一行，“孤儿”是出现在页面末尾的段落的第一行。因此两者都是通过分页符与段落的其余部分隔离的单行。他们被认为是可以避免的，尽管意见不一致认为问题有多严重。

CSS概念是印刷概念的概括，将“最后一行”替换为“最后几行”，将“第一行”替换为“前几行”。这些概括并不是特别有用;除了段落的其余部分之外，在页面上有一个段落的两行（或三行或......）行通常没有错。

CSS属性的definitions有些不自然，例如orphans: 4并不意味着四个孤儿。相反，它表示页面末尾的段落的少于 4行被视为孤儿并且可以避免。找到这种设置很难使用。

两个属性的初始值是2，这意味着要避免单行孤儿和寡妇（即印刷意义上的孤儿和寡妇）。

那你为什么要设置这些属性呢？通常仅作为orphans: 1或widows: 1或两者，以指定不需要避免排版的孤儿或寡妇。即使是这些也很难找到用例。

问题中的示例因此意味着分页符可能不会显示在p，h2或h3元素中，除非每页至少显示3行。因此，5行段落可能根本不会分为两页，而6行段落可能只会被分为3行和3行。这听起来毫无意义。对于标题，它应该不会造成伤害，因为标题通常适合一行 - 但标题的设置毫无意义，因为即使是默认设置也不会阻止2行或3行标题被破坏（标题超过3行） 真的异常）。

Answer 2

引自moz.com

orphans: <integer>
widows: <integer>

这两个属性主要用于分页媒体，通过指定段落中应留在页面顶部（窗口）或底部（孤儿）的行数来控制换行符。

Answer 3

Widows和orphans是旧的印刷术语，用于指定应分别显示在打印页面顶部和底部的最小文本行数。 CSS2属性可以完成相同的操作，确保每页的顶部和底部都显示最少量的文本。

widows和orphans属性共享相同的值：一个整数值，用于指定在强制移动到另一个页面（一种或另一种）之前必须出现在段落中的行数，以及指定的值inherit，它接受可能已经设置的任何父值。寡妇和孤儿的默认数值均为2，确保在发生分页之前，段落中至少有两行文本位于页面的顶部或底部。这些属性仅用于块级元素，例如<p>或<div>。

参考： - safaribooksonline.com