证书打印CSS知识点总结

需求：

1、证书内容动态填充；

2、证书背景图不要求打印，只为展示作用；

3、打印内容兼容屏幕分辨率；

实现：

  <!-- 外层div宽度为背景图片宽 -->
  <div style="position: relative;width: 1397px;margin: 0 auto;">
    <div id="permitImg" style="position: absolute;">
        <!-- 背景图片 -->
        <img src="demo.jpg">
    </div>
    <div class="infos" style="position: absolute;">
        <!-- 展示内容 -->
        <span style="top: 77px;left: 151px;">证书内容</span>
    </div>
  </div>

小知识点：

1、span定宽，但文字不换行，设置word-wrap: break-word;

2、调节span填充文字行间距，设置line-height属性；

3、span定宽定高，超出文本框的内容不展示，设置overflow: hidden;