CSS page-break-inside 属性详解与应用教程
概述
CSS page-break-inside 属性用于控制打印文档时元素内部的分页行为。这个属性特别适用于需要精细控制打印格式的场景，可以防止元素内容在打印时被不恰当地分割到不同页面。
语法与取值
基本语法
element {
page-break-inside: auto | avoid | initial | inherit;
}
属性值说明
| 值 | 描述 |
|---|---|
auto |
默认值，必要时在元素内部插入分页符 |
avoid |
尽可能避免在元素内部插入分页符 |
initial |
设置属性为默认值（auto） |
inherit |
继承父元素的 page-break-inside 属性值 |
使用限制
-
不能用于绝对定位的元素
-
不能用于不生成盒模型的空
<div>元素 -
主要适用于块级元素
基础应用示例
示例1：使用 auto 值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号 - page-break-inside属性示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.print-section {
page-break-inside: auto;
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.code-example {
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #3498db;
overflow-x: auto;
font-family: 'Consolas', monospace;
}
@media print {
.no-print {
display: none;
}
}
</style>
</head>
<body>
<h1>CSS page-break-inside 属性教程</h1>
<div class="print-section">
<h2>自动分页示例</h2>
<p>此区域使用默认的 <code>page-break-inside: auto</code> 设置，允许在内容过长时自动分页。</p>
<div class="code-example">
.content-box {<br>
page-break-inside: auto;<br>
}
</div>
<p>当打印内容超出单页容量时，浏览器会自动在此元素内部插入分页符。</p>
</div>
<div class="print-section">
<h2>编程代码示例</h2>
<p>下面是JavaScript基础语法的示例代码：</p>
<div class="code-example">
// 定义变量<br>
let message = "欢迎学习编程";<br>
<br>
// 函数示例<br>
function greetUser(name) {<br>
return "Hello, " + name + "!";<br>
}<br>
<br>
// 调用函数<br>
console.log(greetUser("代码号学员"));
</div>
<p>在打印时，这段代码可能会根据页面剩余空间被分割到不同页面。</p>
</div>
<button class="no-print" onclick="window.print()">打印本页</button>
</body>
</html>
示例2：使用 avoid 值
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号 - 避免分页示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.avoid-break {
page-break-inside: avoid;
margin-bottom: 30px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f0f8ff;
}
.code-snippet {
background-color: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 5px;
font-family: 'Consolas', monospace;
overflow-x: auto;
}
.note {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 10px 15px;
margin: 15px 0;
}
@media print {
.no-print {
display: none;
}
.avoid-break {
border: 1px solid #000;
background-color: #fff;
}
}
</style>
</head>
<body>
<h1>避免元素内部分页示例</h1>
<div class="avoid-break">
<h2>代码号学习笔记 - JavaScript函数</h2>
<p>以下是一个完整的JavaScript函数示例，使用<code>page-break-inside: avoid</code>确保在打印时保持完整：</p>
<div class="code-snippet">
/**<br>
* 计算两个数字的和<br>
* @param {number} a - 第一个数字<br>
* @param {number} b - 第二个数字<br>
* @returns {number} 两个数字的和<br>
*/<br>
function calculateSum(a, b) {<br>
// 输入验证<br>
if (typeof a !== 'number' || typeof b !== 'number') {<br>
throw new Error('两个参数都必须是数字');<br>
}<br>
<br>
// 返回计算结果<br>
return a + b;<br>
}<br>
<br>
// 使用示例<br>
try {<br>
const result = calculateSum(5, 7);<br>
console.log('计算结果:', result); // 输出: 计算结果: 12<br>
} catch (error) {<br>
console.error('错误:', error.message);<br>
}
</div>
<div class="note">
<strong>注意：</strong>由于设置了<code>page-break-inside: avoid</code>，浏览器会尽可能避免将此代码块分割到两个页面。
</div>
</div>
<div class="avoid-break">
<h2>数据表格示例</h2>
<p>以下是一个数据表格，同样使用避免分页设置：</p>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr style="background-color: #3498db; color: white;">
<th style="padding: 10px; border: 1px solid #2980b9;">函数名</th>
<th style="padding: 10px; border: 1px solid #2980b9;">描述</th>
<th style="padding: 10px; border: 1px solid #2980b9;">返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">calculateSum</td>
<td style="padding: 8px; border: 1px solid #ddd;">计算两数之和</td>
<td style="padding: 8px; border: 1px solid #ddd;">数字</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">formatDate</td>
<td style="padding: 8px; border: 1px solid #ddd;">格式化日期对象</td>
<td style="padding: 8px; border: 1px solid #ddd;">字符串</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">validateEmail</td>
<td style="padding: 8px; border: 1px solid #ddd;">验证邮箱格式</td>
<td style="padding: 8px; border: 1px solid #ddd;">布尔值</td>
</tr>
</tbody>
</table>
</div>
<button class="no-print" onclick="window.print()">打印本页</button>
</body>
</html>
实际应用场景
保持内容完整性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>代码号 - 打印优化示例</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* 避免在以下元素内部分页 */
.no-break-inside {
page-break-inside: avoid;
}
.code-block, table, .image-container, .important-note {
page-break-inside: avoid;
margin-bottom: 25px;
}
.code-block {
background-color: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 5px;
font-family: 'Consolas', monospace;
overflow-x: auto;
}
.important-note {
background-color: #ffeaa7;
padding: 15px;
border-left: 4px solid #fdcb6e;
border-radius: 0 5px 5px 0;
}
@media print {
.no-print {
display: none;
}
body {
padding: 0;
font-size: 12pt;
}
.code-block {
background-color: #fff !important;
color: #000 !important;
border: 1px solid #000;
}
}
</style>
</head>
<body>
<h1>代码号编程学习材料</h1>
<div class="important-note no-break-inside">
<h3>打印注意事项</h3>
<p>本文档已使用CSS打印优化，确保代码块、表格和重要内容在打印时保持完整。</p>
</div>
<h2>JavaScript数组方法</h2>
<p>数组是JavaScript中最常用的数据结构之一，下面介绍几个重要的数组方法：</p>
<div class="code-block">
// map() 方法示例<br>
const numbers = [1, 2, 3, 4, 5];<br>
const doubled = numbers.map(num => num * 2);<br>
console.log(doubled); // 输出: [2, 4, 6, 8, 10]<br>
<br>
// filter() 方法示例<br>
const evenNumbers = numbers.filter(num => num % 2 === 0);<br>
console.log(evenNumbers); // 输出: [2, 4]<br>
<br>
// reduce() 方法示例<br>
const sum = numbers.reduce((total, num) => total + num, 0);<br>
console.log(sum); // 输出: 15
</div>
<h2>数组方法比较表</h2>
<table style="width: 100%; border-collapse: collapse;" class="no-break-inside">
<thead>
<tr style="background-color: #3498db; color: white;">
<th style="padding: 10px; border: 1px solid #2980b9;">方法</th>
<th style="padding: 10px; border: 1px solid #2980b9;">描述</th>
<th style="padding: 10px; border: 1px solid #2980b9;">返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">map()</td>
<td style="padding: 8px; border: 1px solid #ddd;">对数组的每个元素执行指定操作</td>
<td style="padding: 8px; border: 1px solid #ddd;">新数组</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">filter()</td>
<td style="padding: 8px; border: 1px solid #ddd;">筛选满足条件的元素</td>
<td style="padding: 8px; border: 1px solid #ddd;">新数组</td>
</tr>
<tr>
<td style="padding: 8px; border: 1px solid #ddd;">reduce()</td>
<td style="padding: 8px; border: 1px solid #ddd;">将数组减少为单个值</td>
<td style="padding: 8px; border: 1px solid #ddd;">累积结果</td>
</tr>
</tbody>
</table>
<h2>实际应用示例</h2>
<div class="code-block">
// 数据处理示例<br>
const students = [<br>
{ name: '张三', score: 85 },<br>
{ name: '李四', score: 92 },<br>
{ name: '王五', score: 78 },<br>
{ name: '赵六', score: 90 }<br>
];<br>
<br>
// 计算平均分<br>
const averageScore = students<br>
.map(student => student.score)<br>
.reduce((sum, score) => sum + score, 0) / students.length;<br>
<br>
console.log(`平均分: ${averageScore.toFixed(2)}`);<br>
<br>
// 获取优秀学生(分数≥90)<br>
const excellentStudents = students.filter(student => student.score >= 90);<br>
console.log('优秀学生:', excellentStudents);
</div>
<button class="no-print" onclick="window.print()">打印学习资料</button>
</body>
</html>
本节课程知识要点
-
属性功能：
page-break-inside控制打印时元素内部的分页行为 -
适用场景：特别适用于代码块、表格、图片等需要保持完整性的内容
-
常用值：
-
auto：默认值，允许自动分页 -
avoid：尽可能避免元素内部分页
-
-
使用限制：不能用于绝对定位元素或空元素
-
兼容性：所有主流浏览器都支持此属性
-
配合媒体查询：通常与
@media print一起使用，优化打印样式
实用技巧与建议
-
内容分组：将相关的内容放在同一个容器中，并应用
page-break-inside: avoid -
打印预览：始终使用打印预览功能测试分页效果
-
备用方案：对于特别长的内容，考虑提供"展开/收起"功能或分页版本
-
综合使用：结合
page-break-before和page-break-after实现更精细的打印控制
