css page-break-inside属性设置是否插入分页符

原创 国哥笔记  2019-03-06 19:46  阅读 333 views 次

page-break-inside属性定义及用法

在css中,page-break-inside属性是使用来设置是否在指定元素中插入分页符,通常用在position属性值为relative(相对定位)或static(默认定位)的非浮动块级元素,不能对绝对定位(position值为absolute或fixed)的元素使用该属性。

page-break-inside属性并不常见,建议尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

page-break-inside属性语法格式

  1. css语法:page-break-inside:
  2. JavaScript语法:object.style.pageBreakInside="avoid";

属性值说明

  • auto :如果必要则在元素内部插入分页符(默认);
  • avoid:避免在元素内部插入分页符;
  • inherit:从父元素继承page-break-inside属性的设置;

所有主要浏览器都支持page-break-inside属性,但是任何的版本的Internet Explorer(包括 IE8)都不支持属性值 "left"、"right" 以及 "inherit", Firefox,Chrome和Safari不支持属性值"avoid","left"和"right"。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css page-break-inside属性设置是否插入分页符</title>
<style type="text/css">
p{page-break-inside: avoid;}
</style>
</head>
<body>
<p>避免在该元素内部插入分页符</p>
<p>避免在该元素内部插入分页符</p>
<p>避免在该元素内部插入分页符</p>
<p>避免在该元素内部插入分页符</p>
</body>
</html>

运行结果:

css page-break-inside属性设置是否插入分页符

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-page-break-inside.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情