diff --git a/README.md b/README.md
index add2fb2..0bf4828 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,18 @@ You may add `html2pdf`-specific page-breaks to your document by adding the CSS c
```
+In converse you can add the CSS class `html2pdf__page-break-avoid` to any element. During PDF creation if it is detected that the start of an element with this class will be on a different page than the end, then a page break element will be inserted before it so it starts on a new page.
+
+```html
+
+ I'm on page 1!
+
+
+ Don't page break in this image.
+
+
+```
+
### Image type and quality
You may customize the image type and quality exported from the canvas by setting the `image` option. This must be an object with the following fields:
diff --git a/src/index.js b/src/index.js
index 6c8700f..2c746cf 100644
--- a/src/index.js
+++ b/src/index.js
@@ -134,6 +134,28 @@ html2pdf.makeContainer = function(source, pageSize) {
el.style.height = pxPageHeight - (clientRect.top % pxPageHeight) + 'px';
}, this);
+ // Enable avoiding page-breaks in the middle of elements.
+ var pageBreakAvoids = source.querySelectorAll('.html2pdf__page-break-avoid');
+ Array.prototype.forEach.call(pageBreakAvoids, function (el) {
+ var clientRect = el.getBoundingClientRect();
+ var startPageNum = Math.floor(clientRect.top / pxPageHeight);
+ var endPageNum = Math.floor(clientRect.bottom / pxPageHeight);
+ if(endPageNum > startPageNum){
+ /*
+ * Add a page-break element before the current element with
+ * the height computed so elements further down can properly
+ * avoid page-breaks if possible.
+ */
+ var pageBreak = createElement("div", {
+ style: {
+ height: (pxPageHeight - (clientRect.top % pxPageHeight) + 'px'),
+ display: "block"
+ }
+ });
+ el.parentElement.insertBefore(pageBreak, el);
+ }
+ }, this);
+
// Return the container.
return container;
};