如何使用CSS实现自动分页，检测内容超出页边距时强制插入分页符？

你之前的配置不生效的核心原因有三点：

• 给tbody设置display:block破坏了原生表格的布局结构，导致分页识别逻辑异常
• 未在@page中明确指定页面边距，浏览器没有明确的边界参考判断内容是否越界
• 仅用了旧版分页属性，未兼容新版标准属性

以下是完整的修正代码：

/* 明确设置页面边距，这是浏览器判断内容是否越界的核心依据，边距数值可根据需求调整 */
@page {
  size: A4 portrait;
  margin: 2cm;
}

/* 全局盒模型设置，避免边框、内边距撑大元素导致超出页边距 */
* {
  box-sizing: border-box;
}

body {
  font: inherit !important; 
  color: black;
}
.ql-editor *{
  font-family: cwTeXKai !important;
}

table {
  width: 90%;
  border-collapse: collapse;
  border: none;
  margin-top: 18pt;
  border: solid 1pt;
  /* 表格禁止内部被分页截断 */
  break-inside: avoid;
  page-break-inside: avoid;
}

td {
  border: solid 1pt;
}

p {
  font-family: cwTeXKai !important;
  display: block;
  margin-block-start: .03em;
  margin-block-end: .03em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
span{
  font-family: cwTeXKai !important;
}

/* 图片、长代码块等需要完整展示的元素，统一禁止内部被分页截断 */
img, pre, blockquote {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* tbody保留原生布局，仅加分页控制属性，删掉之前错误的display:block、position:relative配置 */
tbody{
  break-inside: avoid;
  page-break-inside: avoid; 
  page-break-after:auto; 
}

配置完成后，浏览器的打印/分页渲染引擎会自动基于你设置的页面边距计算内容位置，如果当前页面剩余空间放不下设置了break-inside: avoid的元素，会自动将整个元素挪到下一页，避免内容被截断、侵入页边距的情况。
可通过浏览器的打印预览功能（快捷键Ctrl+P/Command+P）实时查看分页效果，边距和样式调整后可即时看到变化，无需实际打印。

内容的提问来源于stack exchange，提问作者Peter