正确设置orphans和widows可避免打印时首尾单行孤悬：orphans控制页尾最少保留行数（默认2，需设为3或4），widows控制页首最少保留行数，二者须同在@media print中声明且置于同一选择器内。
打印时第一行单独留在页末，是orphans没设对
浏览器打印预览里常出现某段文字只剩第一行在上一页底部，其余行跳到下一页——这不是bug，是CSS默认orphans值太小（多数浏览器为2）。它规定一个块级元素在分页时，**至少要保留几行在当前页底部**。设成3或4才能避免单行孤悬：
-
orphans只对块级元素生效，display: block或display: flow-root才行，inline或flex容器无效 - 值必须是正整数，设
orphans: 0会被忽略，设orphans: 1等于没设（因为最小合法值就是2） - 和
break-inside: avoid配合用更稳妥，但后者可能让整块内容强行挪到下页，反而造成大片空白
widows控制的是页首孤立行，不是页尾
很多人误以为widows管页尾，其实它管的是**新页顶部至少要保留几行**。比如一段文字跨页，若widows: 3，就要求新页开头至少有三行，否则就把这三行连同前面内容一起推回上一页。常见错误是把它和orphans设反了：
-
widows和orphans必须写在同一个选择器里才有效，分开写可能被后声明覆盖 - 打印媒体查询中必须显式声明：
@media print { p { widows: 3; orphans: 3; } }，屏幕样式不会继承到打印输出 - Chrome 98+ 和 Firefox 102+ 支持较好，Safari 对
widows/orphans在table内的支持不稳定，表格单元格里设了也可能失效
PDF导出工具（如wkhtmltopdf）不认@media print里的widows
很多后端PDF生成服务基于WebKit旧内核，直接忽略widows/orphans。这时候得换思路：
- 改用
break-before: page或break-after: page手动分页，但会破坏流式布局，需提前计算内容高度 - 给关键段落加
page-break-inside: avoid（注意：这是过时属性，但wkhtmltopdf只认这个，不认break-inside） - 如果用Puppeteer，得在
page.pdf()选项里开启preferCSSPageSize: true，否则CSS分页规则可能被无视
移动端WebView打印时orphans基本无效
iOS Safari 和 Android WebView 的打印模块几乎不处理widows/orphans，哪怕写了也当注释。真要控制，只能靠结构妥协：
- 把易断行的段落包进
div并设break-inside: avoid，虽然不保证100%成功，但比纯靠CSS强 - 避免在段落开头用
<br>
或空<p></p>，这些会干扰分页算法，让orphans判断失准 - 字体大小、行高变动会直接影响行数计算，测试时务必用目标设备的实际DPI和缩放比例预览
widows和orphans从来不是独立起效的开关，它们依赖整个盒模型的渲染上下文——行高、字体加载状态、甚至是否启用了font-display: swap，都可能让最终分页结果偏移一行。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
