CSS: DOM that doesn't break in print preview (PDF/printer)

Question

I have a list of col-6 elements (bootstrap) inside a row element. I want to make sure that the content of each block stays intact in pdf preview (print()). I've tried adding a couple of page-break and break css properties as pointed out in this question, but it doesn't seem to work.

var dom = document.querySelector("#list");
dom.innerHTML = dom.innerHTML.repeat(6);
print();

#list>* {
  padding: 20px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  page-break-after: always;
  page-break-before: always;
  break-after: page;
  break-before: page;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="list">
  <div class="col-6">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales sem nisl, ut ultricies purus laoreet efficitur. Morbi lectus orci, ultricies a nulla eget, volutpat molestie risus. Proin eget ipsum fermentum, tincidunt eros et, efficitur turpis.
      Pellentesque vehicula vestibulum nibh eu iaculis. Donec et rutrum felis. Donec rutrum ex elementum, faucibus sem non, blandit velit. Nunc vitae nibh quam. Aenean bibendum consectetur nisl et tincidunt. Aenean dui nisi, accumsan vitae ipsum eu, sagittis
      pellentesque turpis. Suspendisse semper ac sem non mattis.
    </p>
    <p>
      Nam nec ultrices augue. Cras ut lorem felis. Vivamus ante est, pulvinar sit amet porttitor et, aliquet condimentum eros. Sed quis elementum ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend diam nibh, at tristique magna
      facilisis ut. Phasellus felis diam, scelerisque ac hendrerit nec, elementum nec diam. Vivamus tellus nulla, lobortis sit amet iaculis vel, blandit et dolor. Nam semper odio quam, eu venenatis mauris vehicula pulvinar. Curabitur nibh nibh, tempus
      vel tortor id, porttitor consectetur mauris. Cras sagittis ullamcorper est eu dignissim. Nam odio ligula, pellentesque vel enim quis, vehicula tincidunt neque. Donec bibendum id nibh sit amet eleifend.
    </p>
  </div>
</div>

score 0 · Answer 1 · answered Jul 29 '21 at 14:12

I fixed it by changing the display of the container from flex to block and adding float: left to the children.

var dom = document.querySelector("#list");
dom.innerHTML = dom.innerHTML.repeat(6);
print();

#list {
  display: block;
}

#list>* {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  float: left;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="list">
  <div class="col-6">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales sem nisl, ut ultricies purus laoreet efficitur. Morbi lectus orci, ultricies a nulla eget, volutpat molestie risus. Proin eget ipsum fermentum, tincidunt eros et, efficitur turpis.
      Pellentesque vehicula vestibulum nibh eu iaculis. Donec et rutrum felis. Donec rutrum ex elementum, faucibus sem non, blandit velit. Nunc vitae nibh quam. Aenean bibendum consectetur nisl et tincidunt. Aenean dui nisi, accumsan vitae ipsum eu, sagittis
      pellentesque turpis. Suspendisse semper ac sem non mattis.
    </p>
    <p>
      Nam nec ultrices augue. Cras ut lorem felis. Vivamus ante est, pulvinar sit amet porttitor et, aliquet condimentum eros. Sed quis elementum ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend diam nibh, at tristique magna
      facilisis ut. Phasellus felis diam, scelerisque ac hendrerit nec, elementum nec diam. Vivamus tellus nulla, lobortis sit amet iaculis vel, blandit et dolor. Nam semper odio quam, eu venenatis mauris vehicula pulvinar. Curabitur nibh nibh, tempus
      vel tortor id, porttitor consectetur mauris. Cras sagittis ullamcorper est eu dignissim. Nam odio ligula, pellentesque vel enim quis, vehicula tincidunt neque. Donec bibendum id nibh sit amet eleifend.
    </p>
  </div>
</div>

score -1 · Answer 2 · answered Jul 29 '21 at 13:23

-1

You couls always change the css for printing using

@media print {

}

answered Jul 29 '21 at 13:23

Edward Newsome

723
7
15

Doesn't seem to change anything. Isn't that so that the blocks inseide the `@media print` are only applied in print mode? Having them public or inside `@media print` is the same thing – nick zoum Jul 29 '21 at 13:26
Correct, i think your issue is where you are setting the break. Try putting it inside: `#list p { ... }` – Edward Newsome Jul 29 '21 at 13:34
Tried a couple of permutations with the children none of the work – nick zoum Jul 29 '21 at 13:39

CSS: DOM that doesn't break in print preview (PDF/printer)

2 Answers2