DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
在排版术语中,孤儿是指一段文字的第一行留在旧页面上而该段文字的其余部分继续在下一页上的情况。orphan
属性控制可以留在旧页面上的段落行的最小数量。 此属性仅影响分页媒体,如 print
。
@media print {
p {
orphans: 3;
}
}
例如,如果一段文字无法完整地放在一页上,它将在任何可能的位置被分割。 这样一来,一段文字的单行可能会出现在一页上,然后在下一页继续。 这通常是不可取的,因此许多文字处理器要求至少有两行留在旧页面上,而不是一行。 您可以指定一个正数(其中 2 是默认值)或 inherit
。
请注意,orphan
属性通常不会影响非分页媒体,如 screen
。 但是,支持 orphans
和 columns
的浏览器也会将预期功能应用于列。 此外,此属性仅影响块级元素。
简而言之,在 CSS 中:
widows
= 分割在新页面上的段落中行的最小数量。orphans
= 分割在旧页面上的段落中行的最小数量。
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
25+ | 无 | 无 | 9.2+ | 8+ | 无 | 无 |
感谢您的清晰解释。
孤儿情况的另一种情况是什么,其中一个单词独自出现在段落底部的行中?当它是一个短单词时,这最令人反感,比如少于 6 个字母。
有一些 WordPress 插件可以做到这一点,但我不喜欢为了一个很小的演示调整而给服务器增加负担。
您所谈论的不是孤儿。它被称为
寡妇
,也有一个专门的属性来处理这种情况。我知道这很老了,但我认为 ORyan 误解了 Christopher 提出问题时的上下文,我的回答是为了澄清之后看到 ORyan 回复并认为它会解决 Christopher 问题的人。我认为 Christopher 指的是非印刷媒体,但文章明确指出它不影响“屏幕”媒体,除非与 CSS 列一起使用。我相信 Christopher 在非印刷媒体的上下文中提出了问题,因为段落末尾的一行中的单个单词(虽然看起来很丑陋,有时令人沮丧)与一个单词单独占据一列(或在印刷媒体中是页面)的问题不同,这就是 widows 属性适用的地方。但是为了回答您的问题,Chris,您询问的问题与这篇文章无关。它是关于印刷媒体(主要是)以及如何防止页面/列在结尾(孤儿)或开头(寡妇)有太多文本。
我意识到我并没有真正回答您的问题,而只是说您的问题与本主题无关。所以为了回答您的问题,我不知道如何使用仅限 CSS 的解决方案来自动(动态)处理这个问题。如果浏览器确定需要换行,那么通常意味着上一行没有足够的空间来容纳最后一个单词。如果没有足够的空间,那么您将如何处理最后一个单词?如果您认为最好的解决方案是在每行上至少要有几个单词,那么您将不得不使用 JavaScript 来确定并解决这个问题,并在文本渲染后以及每当视窗大小调整时。
很可惜 Safari 和 Firefox 不支持这个功能!
我希望这不是一张我喜欢在研究后进行操作的图片。但是感谢您,这很有启发。
有没有办法处理孤儿标题?在我的用例中,我有一个标题需要与文本分组。使用 orphans 和 widows 属性可以处理文本,但我的标题成为孤儿,因为后面的文本换行到下一列。有没有其他方法来处理它,并确保标题不会单独留在前面的列中,而文本会继续到下一列?
示例在这里(可能需要调整浏览器窗口才能看到问题)
http://codepen.io/klappy/pen/LZVePN
我更新了我的 CodePen 示例以展示我最终尝试的内容。我最终用一个 div 将标题和第一个段落包装起来,并使用“break-inside: avoid;”来防止它换行。如果有人知道更好的方法,请分享。
http://codepen.io/klappy/pen/LZVePN
一年过去了,但我还是想回答 Klappy 的问题:在标题上设置
page-break-after: avoid
<h2>
应该始终与文本一起显示。