orphans和widows必须写在@media print中且同时声明才生效，仅作用于block/flow-root等块级容器，值须≥2（设1或0无效），widows优先级高于orphans。
orphans 和 widows 必须写在 @media print 里才生效
写在普通样式表或 @media screen 中的 orphans 和 widows 完全无效，浏览器会静默忽略。这不是兼容性问题，而是规范强制要求——它们只在分页上下文（如打印、PDF 导出）中被解析。
常见错误包括：
- 把
p { orphans: 3; }直接放在全局样式里 - 嵌套在其它媒体查询中，比如
@media screen and (min-width: 768px) { @media print { ... } }—— 这是非法语法，整个块会被丢弃 - 用
!important强行提权，没用；不进@media print，连解析都不发生
正确写法只有这一种结构：
@media print { p, section, .article-content { orphans: 3; widows: 3; } }
orphans 和 widows 只对块级容器生效
它们作用的对象不是“文字”，而是**块格式化上下文（BFC）容器中的行框（line boxes）**。所以 display: inline、display: flex、display: grid 的父元素上设了也没反应。
立即学习“前端免费学习笔记（深入）”；
必须确保目标元素满足以下任一条件：
-
display: block（默认值，p、div、section等天然符合） -
display: flow-root（显式创建 BFC，适合需要清除浮动又不想用overflow: hidden的场景） -
display: table-cell或display: list-item（较少见，但合法）
如果你用的是组件类名（如 .post-body），请检查它的 display 值是否被框架或重置样式覆盖成了 flex —— 此时需手动加回 display: block。
设成 1 或 0 实际等于没设
浏览器对 orphans 和 widows 有硬性下限：最小合法值是 2。这意味着：
-
orphans: 1会被自动提升为2，无法避免单行孤悬 -
orphans: 0或负数会被直接忽略，属性不参与计算 - 想真正起效，至少设为
3；对长段落或小字号内容，4更稳妥
另外，widows 优先级高于 orphans。如果只改 orphans 而 widows 仍为默认 2，浏览器可能因新页顶部不足 2 行，把整段往上拉，导致原页底部反而只剩 1 行——所以二者必须同时声明、数值一致。
选择器范围太窄会导致部分段落失效
只写 p { orphans: 3; widows: 3; } 是典型陷阱。现代页面中大量内容包裹在 div、section、article 或自定义类（如 .content）里，这些容器若没被选中，里面的文本照样被随意截断。
推荐做法是显式覆盖常见语义块：
- 基础组合：
p, div, section, article, aside, blockquote - 配合项目类名：
.post-body, .entry-content, .markdown-content - 避免 ID 选择器（如
#main），它不可复用，且结构微调即失效
如果页面使用 CSS-in-JS 或 Shadow DOM，还需确认样式是否穿透到了打印上下文——某些框架会隔离 @media print 规则。
最易被忽略的一点：这两个属性不解决“某段内容必须独占一页”的需求，那是 break-before 或 break-after 的事；它们只管“别让一段文字被切成头尾各一行”。一旦容器本身被 break-inside: avoid 挤到下页，orphans/widows 就彻底没机会介入了。
