css page-break-inside样式实例

时间:2023-05-04 17:10:48

page-break-inside 是一个 CSS 分页属性,用于指定是否允许在元素内部发生分页。它控制一个元素是否应该被整体放在一页上。

该属性接受以下值:

auto:默认值,表示分页由浏览器处理。
avoid:尝试防止在元素内部发生分页。
以下是一个 page-break-inside 的示例:

<!DOCTYPE html>
<html>
<head>
<title>Page Break Inside Example</title>
<style>
.no-break {
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="no-break">
<h1>Page 1</h1>
<p>Content for page 1 goes here.</p>
<p>More content for page 1 goes here.</p>
</div>
<div class="no-break">
<h1>Page 2</h1>
<p>Content for page 2 goes here.</p>
<p>More content for page 2 goes here.</p>
</div>
</body>
</html>

在上面的示例中,使用 .no-break 类选择器为 <div> 元素设置 page-break-inside: avoid,以防止在元素内部发生分页,保证整个元素在一页内。

相关词 page