CSS Print问题向前端大佬请教

zoenbo

[HTML] 纯文本查看 复制代码

<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

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

zoenbo

Takitooru 发表于 2021-3-18 15:59
删除table {page-break-inside: avoid;}试试

试了，也是截断的。我是下边这个页面测试的
http://www.newlifeclan.com/html5/archives/116

[Asm] 纯文本查看 复制代码

@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;
}
}

传说中的五号

您应该指定所有不分页的元素，或者直接用 *
类似下面这样

[Asm] 纯文本查看 复制代码

 table,p,img {page-break-inside: avoid;}

zoenbo

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

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

传说中的五号

测试过没问题，嫌麻烦可以直接简单粗暴的

[CSS] 纯文本查看 复制代码

*{page-break-inside: avoid;}

你发的那个网站如果只设置这一条，然后A4打印菜单栏会遮盖部分区域，自己处理下就行了，打印更多设置勾选背景图形就能看到

zoenbo

传说中的五号 发表于 2021-3-18 17:32
测试过没问题，嫌麻烦可以直接简单粗暴的[mw_shl_code=css,true]*{page-break-inside: avoid;}[/mw_shl_cod ...

还是分割开了。

Takitooru

是不是这样？？？只要文字以及图片不被分页打断就行了吧？？？？
动态效果图

传说中的五号

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

zoenbo

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

怪了，动图看不到。