I'm using Chrome v99 and a pretty basic usage of break-inside: avoid - but it does nothing.
Moderator: This is not a duplicate of this post and the 1 answer there isn't helpful.
My objective is to disallow the contents of all these divs from splitting at page breaks:
<div class="opt">
Here is my inline css:
<style media="screen" type="text/css">
#media print {
div.opt, table {
break-inside: avoid !important;
}
}
</style>
The full html is a bit lengthy but you can view the entirety here.
Simply press CTRL+P and observe that it page-breaks in the middle of divs with a class of opt - but it shouldn't because I'm using break-inside: avoid.
The example I linked to is very short and contrived, but my real scenario has many more sections and is dynamic, pulling from a database. So there's no way to know where the page is going to break relative to the divs. I just want the contents within those divs with that class to always stay together on the same page and never split across a page break. No div contents ever exceed a page, they are even shorter than my example.
Help, what am I doing wrong?
You have media=screen in the style tag...
Your print styles will only load when you're using a screen and not a printer
<style media="print" type="text/css">
div.opt, table {
break-inside: avoid !important;
}
</style>
When you fix it though it still seems to wrap onto multiple pages uglier but at least now you can play around with what print styles work
I have many divs that proposed to be printed - on different pages.
How can I make sure that when the user is clicking the print button, each div will be on a different page?
Thanks!
You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.
#media print {
div {
page-break-after: always;
}
}
More information about page-break-after on MDN.
In css, there is a media query you can use to specifically format your web page for when you want to print it:
#media print {
/* insert your style declarations here */
div {
page-break-after: always; /* ensures the next will we appear on new page */
}
}
You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.
On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;
You can also for the use to print in a certain format that you want to specify using the follow:
#page {
size: A4; /* or A4 landscape or A5 */
}
I some CSS similar to this:
table#id {
display : none;
}
#media print {
table#id {
display : block;
}
.no-page-break {
page-break-inside: avoid !important;
}
}
Each td contains a div.no-page-break. The problem I'm having is that there are page breaks inside the tds unless the table is made visible before opening the print dialogue. If I emulate print media in the dev tools and print, it works fine. If I display the table before window.print() and hide it afterwards it also works, although I'd like to avoid this hack. Anyone have any ideas about why this is happening?
I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*
I am working in a project using ruby on rails(3.1). My requirement is to produce pdf from the html content. So I use pdfkit gem.
In some pages, characters in single line partially cut between pages. When I convert html convert to pdf using pdfkit gem
version of wkhtmltopdf: wkhtmltopdf -- 0.11.0 rc1
operating system: Linux CentOS 5.5
In the image below showing character partially cut between pages.
Please suggest a solution.
Example 1
Example 2
I did have this problem with a table:
Then I added this to my CSS:
table, img, blockquote {page-break-inside: avoid;}
This fixed the problem:
I just ran across this and found something that resolved the issue for me. In my particular case, there were divs with display: inline-block; margin-bottom: -20px;. Once I changed them to block and reset the margin-bottom, the line splitting disappeared. YMMV.
According to some documentation I found (see Page Breaking), this is a known issue and suggests using CSS page breaks to insert page breaks (assuming you are using patched version of QT):
The current page breaking algorithm of WebKit leaves much to be
desired. Basically webkit will render everything into one long page,
and then cut it up into pages. This means that if you have two columns
of text where one is vertically shifted by half a line. Then webkit
will cut a line into to pieces display the top half on one page. And
the bottom half on another page. It will also break image in two and
so on. If you are using the patched version of QT you can use the CSS
page-break-inside property to remedy this somewhat. There is no easy
solution to this problem, until this is solved try organising your
HTML documents such that it contains many lines on which pages can be
cut cleanly.
See also: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9,
http://code.google.com/p/wkhtmltopdf/issues/detail?id=33 and
http://code.google.com/p/wkhtmltopdf/issues/detail?id=57.
In my case, the issue was resolved by commenting out the following css:
html, body {
overflow-x: hidden;
}
In general, check if any tags have overflow set as hidden and remove it or set it to visible.
Btw, I am using wkhtmltopdf version 0.12.2.1 on Windows 8.
https://github.com/ArthurHub/HTML-Renderer/issues/38
**var head = "<head><style type=\"text/css\"> td, h1, h2, h3, p, b, div, i, span, label, ul, li, tr, table { page-break-inside: avoid; } </style></head>";**
PdfDocument pdf = PdfGenerator.GeneratePdf("html>" + head + "<body>" + m42Notes + "</body></html>", configurationOptions);
I scoured the internet for a couple of weeks, trying to overcome this issue. None of the solutions I found worked for me, but something else did.
I had a two column layout where the text was getting cut off mid-text. In the broken state, my basic structure looked like this:
#media print {
* {
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
}
}
.col-9{
display: inline-block;
width: 70%;
}
.col-9{
display: inline-block;
width: 25%;
}
<div class="col-9">
[a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
[a short sidebar here]
</div>
I fixed it by changing it to:
#media print {
* {
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
}
}
.col-9{
display: block;
float: left;
width: 70%;
}
.col-9{
display: block;
float: left;
width: 25%;
}
.clear{
clear: both;
}
<div class="col-9">
[a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
[a short sidebar here]
</div>
<div class="clear"></div>
For some reason, the tool could not handle the display: inline-block setup. It works with floats. I'm running version 0.12.4.
This is old but hopefully will help someone - I was having the issues too, tried everything - even resorting back to old versions mentioned (12.1) but to no avail. I kept tweaking css to play around, trying to throw in page-break avoids everywhere, not having much progress. Then I tweaked css that was on the root div of my html, and it fixed it. I made so many tweaks trying to get it to work so I can't be 100% sure, but I believe the issue was it set to 'display:table' with margin: 0 auto and a specific width on the main outer div. It started working and not cutting off either images or tables mid-row once I removed that. Then the page-break-inside: avoid was working after that as expected.
I believe ultimately the code is trying to guess as best as it can exactly how many pixels high each page is, and where exactly (down to the pixel) is your content. We have to make it easy for the library to detect this by removing as much odd css in there as possible, so it's as simple as possible to calculate down to the pixel where the content lies. That's my guess.
I solved problem adding margin-top and margin-bottom, like this:
$this->get('knp_snappy.pdf')->generateFromHtml($html, $pdfFilepath, [
'default-header' => false,
'header-line' => false,
'footer-line' => false,
'disable-javascript' => true,
'margin-top' => '3mm',
'margin-bottom' => '3mm',
'margin-right' => '5mm',
'margin-left' => '5mm',
'orientation' => 'Landscape',
], true);
The cut text problem is a known webkit problem and it seems developers found a solution inside wkhtmltopdf. Updating to 0.12.1 will fix the cut-text problem (if you don't want to waste time with compilations, you can just take the binary file from here: https://github.com/h4cc/wkhtmltopdf-amd64 ).
Have been putting up with this for months and finally found a fix for my situation. I'm using the github css stylesheet in the html file I'm converting, and code blocks that span multiple pages get the text cut if. Nothing is missing, it's just cut in half.
Bottom of a page:
Start of next page:
So in the github stylesheet overflow is set to auto for <pre> tags.
.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: auto;
...
Switching the overflow property to hidden solved it for me!
.markdown-body .highlight pre,
.markdown-body pre {
padding: 16px;
overflow: hidden;
Think I tried all the other answers on this page, but this is solved for me. Hope it helps someone else out :)
I was able to find a workaround to this issue by installing wkhtmltox_0.12.6-1.bionic_amd64.deb (for Ubuntu) from https://github.com/wkhtmltopdf/packaging/releases/0.12.6-1
After updating this wkhtmltox package, the tables and text will not cut off at the end of the page anymore. This fix introduced a different issue for me, now the generated pdf has no styling. For example font-family, font-size or even text alignment are all gone, and are using some default setting.