今天遇到了一个问题，在页面进行打印的东西，一些内容必须打印在一张A4纸上，起初想到把页面变成PDF然后再打印，但仍然无法控制页面的分页符。为此去Google了一圈，发现个好方法，Css就可以做到而且非常的简单。只需定义一个属性即可。
在CSS2中打印的属性如下：
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
于是我们可以利用这里面的属性来设置打印的属性，将我们要显示的放在一张纸上，如果内容超出一张灰显示在下一张上，但下一张会有一个分隔符，为此我们要尽量的用Css来控制我们的页面打印格式。
<html>
<head>
<style>
.page{
page-break-after:always;
}
</sytle>
</head>
<body>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
<div>
page-break-after 设置元素后是否应当放置分页符。 auto、always、avoid、left、right
page-break-before 设置元素前否应当放置分页符。 auto、always、avoid、left、right
page-break-inside 设置元素内部是否应当放置分页符。 auto、avoid
</div>
<div class="page"></div>
</body>
</html>
此时page 的Css样式表就相当于插入了一个分页符，所有的内容将分为三页显示。
分享到：
相关推荐
要命名所有文件（.php、.html、.js、...），请使用带下划线作为分隔符的小写表示法 应用程序中的每个页面都对应于包含该页面的角度控制器的 static/scripts 文件夹中的同名 .js 文件。 每一侧正好对应一个角度控制器...
输入的值将在指定的分隔符上拆分，并为列表中的每一项创建一个标签。 安装 在页面上包含 jQuery 后，包含jquery.tagify.js和jquery.tagify.css 。 < script src =' /path/to/jquery.tagify.js ' > </ ...
目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, ...
目标是创建没有ViewState，没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源...
calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...
一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1 插入.icon图标...
calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_shortcutIconOB_v1...
calendarPopup 一个弹出日历表格，用以确保输入的日历是按照特定的格式进行输入的，主要特色包括：日历链接，按照需要的方式设定日历的格式，按照需要可以在日期项目间增加分隔符等等功能 MX95982_...
目录 ... ... ... 1.2.1 标记码简介1 ...15.5 ::范围解析操作符······ 236 15.6 parent···237 15.7 序列化对象·····238 15.8 魔术函数__sleep 和__wakeup·239 15.9 构造函数中的引用·····239
03 基于BootStrap和FontAwesome制作页面 04 创建学生信息 05 删除学生信息 第57章 01 上节内容回顾 02 上节bug修复 03 编辑学生信息之前端功能 04 编辑学生信息之后台处理 05 以上内容总结 06 Ajax功能之dataType...
|：分隔符 /：强制换行 Cut：剪切 Copy：复制 Paste：粘贴 Pastetext：文本粘贴 Blocktag：段落标签 Fontface：字体 FontSize：字体大小 Bold：粗体 Italic：斜体 Underline：下划线 Strikethrough：中划线 Font...
[增强]自定义下拉框、选项卡和多选框显示方式和多选分隔符 [更改]删除广告位时删除对应广告, 删除链接分类时删除对应链接 [更改]默认模板登录页添加广告 [增强]内链允许随机读取,自定义内链条数 [更改]重置菜单...
19 <br>0038 巧用“^=”运算符 19 <br>0039 巧用位移运算符 20 <br>0040 使用条件运算符 20 <br>0041 巧用分隔符 20 <br>0042 如何处理转义字符 21 <br>0043 “；”结束符问题 21 ...
如果省略该参数，则使用逗号作为分隔符 |--2.toString()方法--可把数组转换为字符串，并返回结果 |--3.concat()方法--用于连接两个或多个数组，该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的...
System.out.printf() 可插入带 % 的输入类型,前两种只可以插入转义符, 不能插入 % 的数据或字符串 在 printf 里面,输出有5个部分 %[argument_index$][flags][width][.precision]conversion 以“％”开头，[第几个...
5.2.2 控制换行(br元素) 5.2.3 连字符 5.2.4 预格式化文本(pre元素) 5.2.5 段落的视觉呈现 5.3 标题字体(h#元素) 5.4 标记文档改变：ins和del元素 5.5 基本文字格式(tt、i、b、big、small、strike、s、u) 5.6 字体...
也就是加“|”分隔符再加模板名。至于定时设置等其它几项根据项目底下说明，就可以很好设置。 （2）网站信息：这里设置一些前台显示底部版权信息、客服联系方式等。网站关键词、及描述关键到被网络搜索引擎（SEO...
6.1.5 css属性值选择符 / 234 6.1.6 伪类选择符 / 235 6.1.7 扩展选择器 / 248 6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素：ext.dom.element / 252 6.2.1 从错误...