网站 › 『编程语言讨论求助区』 › CSS Print问题向前端大佬请教

zoenbo 发表于 2021-3-18 15:02

CSS Print问题向前端大佬请教

本帖最后由 zoenbo 于 2021-3-18 20:39 编辑

<div class="top">WELCOME</div>
<div class="nav">HOME | ABOUT | CONTACT</div>
<div class="content">LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br />LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br /><img src="1.jpg">LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br />LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br />LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br />LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD<br />LOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORDLOVE IS A WORD
</div>

我想打印的时候只要content部分，打印尺寸为100mm 150mm，边距为0.3mm，缩放为110，让图片以及文字不被分页切割，该怎么写呢？下边是网上找的，不太好使。。。（虚拟打印机方法自己会，现在只要CSS方法哈）


@media print {
    .top,.nav{display:none;}
    body {transform: scale(1.1);}
    table {page-break-inside: avoid;}
    @page {
      size: 100mm 150mm; margin:0.3mm;
    }
}

遇到的问题截图

文字被截断了



文字被截断2


图片被截断

Takitooru 发表于 2021-3-18 15:59

删除table {page-break-inside: avoid;}试试

zoenbo 发表于 2021-3-18 16:06

本帖最后由 zoenbo 于 2021-3-18 16:07 编辑

Takitooru 发表于 2021-3-18 15:59
删除table {page-break-inside: avoid;}试试
试了，也是截断的。我是下边这个页面测试的
http://www.newlifeclan.com/html5/archives/116
@media print {
    body {transform: scale(1.02);}

    @page {
      size: 100mm 150mm; margin:5mm;
    }
    img{
        page-break-after: avoid;
    page-break-inside: avoid;
}
div.pageBlock{
page-break-before: always;
}
}

传说中的五号 发表于 2021-3-18 17:13

您应该指定所有不分页的元素，或者直接用 *
类似下面这样 table,p,img {page-break-inside: avoid;}

zoenbo 发表于 2021-3-18 17:22

传说中的五号 发表于 2021-3-18 17:13
您应该指定所有不分页的元素，或者直接用 *
类似下面这样 table,p,img {page-b ...

问题也是一样存在，这真是让人头疼的事。

传说中的五号 发表于 2021-3-18 17:32

测试过没问题，嫌麻烦可以直接简单粗暴的*{page-break-inside: avoid;}
你发的那个网站如果只设置这一条，然后A4打印菜单栏会遮盖部分区域，自己处理下就行了，打印更多设置勾选背景图形就能看到

zoenbo 发表于 2021-3-18 17:37

传说中的五号 发表于 2021-3-18 17:32
测试过没问题，嫌麻烦可以直接简单粗暴的*{page-break-inside: avoid;}
还是分割开了。

Takitooru 发表于 2021-3-18 17:44

是不是这样？？？只要文字以及图片不被分页打断就行了吧？？？？
动态效果图
https://s3.ax1x.com/2021/03/18/62Wwid.gif

传说中的五号 发表于 2021-3-18 17:51

zoenbo 发表于 2021-3-18 17:37
还是分割开了。

zoenbo 发表于 2021-3-18 18:03

Takitooru 发表于 2021-3-18 17:44
是不是这样？？？只要文字以及图片不被分页打断就行了吧？？？？
动态效果图

怪了，动图看不到。

查看完整版本: CSS Print问题向前端大佬请教