如何在HTML页面中每隔29.7cm（A4高度）显示分页水平线？

核心思路 #

利用CSS线性渐变创建重复的水平线背景，配合页面尺寸规则，让线条精准对应A4纸张（29.7cm高）的分页位置，同时确保内容自然叠加在背景之上。

具体实现步骤 #

1. 设置页面基础尺寸
   使用@page规则定义A4页面的尺寸和边距，让背景的29.7cm间隔与实际打印页面匹配：

   @page {
       size: A4 portrait;
       margin: 1cm; /* 根据需求调整边距，上下边距会影响水平线位置 */
   }
   

2. 创建重复水平线背景
   给body添加线性渐变背景，每个29.7cm高度单元的底部绘制1px黑线，设置背景重复方式为纵向重复：

   body {
       margin: 0;
       padding: 0;
       /* 渐变逻辑：前29.7cm-1px为透明，最后1px为黑色 */
       background: linear-gradient(to bottom, 
           transparent calc(29.7cm - 1px), 
           #000 calc(29.7cm - 1px), 
           #000 29.7cm) repeat-y;
       background-size: 100% 29.7cm; /* 每个背景单元高度为A4纸高 */
       background-position: 0 1cm; /* 垂直偏移量匹配@page的margin-top */
   }
   

3. 适配内容容器
   给内容容器设置内边距和宽度，避免内容超出页面边距，同时保证内容在背景上方（默认z-index优先级足够，无需额外设置）：

   .content {
       padding: 0 1cm;
       max-width: calc(21cm - 2cm); /* A4宽度21cm，减去左右边距各1cm */
       margin: 0 auto;
       line-height: 1.6;
       font-family: sans-serif;
   }
   

完整示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A4分页标记示例</title>
    <style>
        @page {
            size: A4 portrait;
            margin: 1cm;
        }

        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(to bottom, 
                transparent calc(29.7cm - 1px), 
                #000 calc(29.7cm - 1px), 
                #000 29.7cm) repeat-y;
            background-size: 100% 29.7cm;
            background-position: 0 1cm;
        }

        .content {
            padding: 0 1cm;
            max-width: calc(21cm - 2cm);
            margin: 0 auto;
            line-height: 1.6;
            font-family: sans-serif;
        }

        /* 可选：手动添加分页符测试 */
        .page-break {
            page-break-after: always;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>第一页内容</h1>
        <p>这里是第一页的测试文本，用来验证水平线是否在分页处显示。</p>
        <!-- 重复添加内容直到超过一页高度 -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h2>第二页内容开始</h2>
        <p>水平线应显示在第一页与第二页的分界位置。</p>
    </div>
</body>
</html>

常见问题排查 #

1. 水平线不显示：检查浏览器打印设置，确保勾选了「打印背景图形」选项（部分浏览器默认关闭）。
2. 位置偏移：同步调整@page的margin和background-position的垂直偏移量，保证线条与分页位置对齐。
3. 背景重复异常：确认background-size设置为100% 29.7cm，确保每个背景单元高度严格匹配A4纸高。

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