[英]How to prevent page break in Html print for title of image (is there a <printgroup> tag)
Hi is there a way/tag to group divs <div class="print always on one page"> <div1> <div2> </div>
.您好,有没有一种方法/标签可以对 div
<div class="print always on one page"> <div1> <div2> </div>
进行分组。 I want to print a image (svg) and the title.我想打印图像 (svg) 和标题。 Both shall always be printed on the same page.
两者应始终打印在同一页上。
I invoke the js code function printInvoke() { window.print(); }
我调用 js 代码
function printInvoke() { window.print(); }
function printInvoke() { window.print(); }
from my html page.从我的
function printInvoke() { window.print(); }
页面。 How can I group div-Title and div-Image to be one at print time?如何在打印时将 div-Title 和 div-Image 组合为一个?
Use a figcaption?使用图形说明? and page-break
和分页符
div figure { page-break-before: auto; page-break-after: auto; page-break-inside: avoid; }
<div> <figure> <figcaption>Caption 1</figcaption> <svg viewBox="0 0 500 500"> <defs> <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="10" height="10" fill="none" stroke="lightblue" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#grid)" /> <rect x="25%" y="25%" width="50%" height="50%" fill="rgba(255,0,0,0.5)"></rect> <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="rgba(0,255,0,0.5)"></ellipse> <polygon points="125,250 250,125 375,250 250,375" fill="rgba(0,0,255,0.5)"></polygon> <path d="M 187.5,187.5 h 125 v 125 h -125 z" fill="rgba(0,0,0,0.5)"></path> </svg> </figure> </div> <div> <figure> <figcaption>Caption 2</figcaption> <svg viewBox="0 0 500 500"> <defs> <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="10" height="10" fill="none" stroke="lightblue" /> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#grid)" /> <rect x="25%" y="25%" width="50%" height="50%" fill="rgba(255,0,0,0.5)"></rect> <ellipse cx="50%" cy="50%" rx="25%" ry="25%" fill="rgba(0,255,0,0.5)"></ellipse> <polygon points="125,250 250,125 375,250 250,375" fill="rgba(0,0,255,0.5)"></polygon> <path d="M 187.5,187.5 h 125 v 125 h -125 z" fill="rgba(0,0,0,0.5)"></path> </svg> </figure> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.