关于CSS 打印你应该知道的样式配置

海军
• 阅读 222

昨天在做一些打印的需求,遇到了一些小坑,记录分享一下。

CSS 打印分页功能

需求: html 在一个区域显示数据,当放不下时,自动第二页存放,打印

你可以使用 CSS 的分页属性来实现这个功能。CSS 分页属性包括 page-break-before、page-break-afterpage-break-inside,它们可以控制在哪里分页。

主要是这几个配置样式属性:

  1. 分页符: 使用 page-break-beforepage-break-after 属性来在指定元素之前或之后插入分页符。
@media print { .page-break { page-break-before: always; } }
  1. 避免分割元素:使用 page-break-inside 属性来避免将元素分割到不同的页面上。 【放在要分割的元素上】
@media print {
  .avoid-break {
    page-break-inside: avoid;
  }
}

  1. 控制分页位置:使用 page-break-beforepage-break-after 属性的值来控制分页的位置,如 autoalwaysavoid 等。
@media print {
  .custom-break {
    page-break-before: auto; /* 默认值,根据需要调整 */
    page-break-after: always;
  }
}

具体来说,你可以将要显示的数据放在一个容器元素中,并为该元素设置 page-break-inside: avoid; 属性,表示不允许在其中间分页。然后,为容器元素的父元素设置 page-break-after: always; 属性,表示在该元素之后始终分页。

<style>
  .container {
    page-break-inside: avoid;
  }
  .page {
    page-break-after: always;
  }
</style>

<div class="page">
  <div class="container">
    <!-- 这里放要显示的数据 -->
  </div>
</div>

在这个例子中,我们定义了一个名为 container 的容器元素,并为其设置了 page-break-inside: avoid; 属性,表示不允许在其中间分页。然后,我们定义了一个名为 page 的父元素,并为其设置了 page-break-after: always; 属性,表示在该元素之后始终分页。

当数据超出一页时,浏览器会自动将剩余部分放到下一页。如果你需要打印这些数据,只需将页面设置为打印模式即可。在打印预览中,你可以看到所有的数据被正确地分页,并且可以跨页打印。

CSS 实现打印 Table 单元格换行显示

  1. white-space: normal;:默认值,文本在遇到空格或换行符时换行,单词内部不会强制分割。
  2. word-break: break-all;:单词会被强制分割,即使在单词内部也会进行换行。
  3. line-height: 指定行高来确定分割后的间隙
table tr td:nth-child(1) {
      width: 80px; //指定单元格宽度
      word-break: break-all;
      white-space: normal;
      line-height: 1.2; 
}

CSS 打印常用配置

1.隐藏不必要的元素:通过设置 display: none; 可以隐藏在打印版本中不需要显示的元素,例如导航栏、广告等。

@media print {
  .navbar, .ad-banner {
    display: none;
  }
}

2.调整字体大小和颜色:可以根据打印需求调整文本的字体大小和颜色。

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
}

####

3.设置页面边距:通过设置 margin 属性来调整打印页面的边距.

@media print {
  @page {
    margin: 1cm;
  }
}

4.隐藏背景图像和颜色:可以通过设置 background 属性为 none 来隐藏打印页面的背景图像和颜色。

@media print {
  body {
    background: none;
  }
}

5.设置页面大小:通过 @page 规则和 size 属性来定义打印页面的大小。

@media print {
  @page {
    size: A4; /* 可以使用常见的纸张尺寸如 A4、Letter、Legal 等 */
  }
}

6.调整图片显示:可以通过设置 max-width 属性来控制打印版本中图片的最大宽度,避免图片溢出页面边界。

@media print {
  img {
    max-width: 100%;
    height: auto;
  }
}

7. 隐藏链接的 URL:如果你不希望在打印版本中显示链接的 URL,可以使用 text-decoration 属性来隐藏。

@media print {
  a::after {
    content: none;
  }
}

8.调整页眉和页脚:

可以使用 @top-left, @top-center, @top-right, @bottom-left, @bottom-center, @bottom-right 等伪元素选择器来定义页眉和页脚的内容和样式。

@media print {
  @page {
    @top-left {
      content: "页眉内容";
    }

    @bottom-center {
      content: "页脚内容";
    }
  }
}

使用 @media print 媒体查询可以确保这些样式仅在打印时生效,并保持网页和打印版本的差异。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
双十一预售活动分析
2022年双十一促销活动已经开始,大家应该都提前开始关注今年双十一活动的时间表了吧?2022年10月24日晚8:00天猫双11预售时间,第一波销售时间10月31日晚8:0,第二波销售时间11月10日晚8:00;天猫双11的优惠力度是跨店每满30050
Wesley13 Wesley13
2年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
ELK学习笔记之配置logstash消费kafka多个topic并分别生成索引
0x00 filebeat配置多个topicfilebeat.prospectors:input_type:logencoding:GB2312fields_under_root:truefields:添加字段
Wesley13 Wesley13
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
海军
海军
Lv1
海军,专注Web前端领域开发,分享开发经验与最新前端技术。 微信公众号: 前端自学社区
文章
27
粉丝
10
获赞
33