css - 打印时防止网格内部断裂

Question

我有一个带有要打印的文本和图像的网格布局，我只希望页面在文本行中中断，而不是在图像中中断，我的网格代码有两行，一行用于文本，一行用于图像，并且网格内的图像是图像的另一个网格，代码如下所示：

.grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "text"
    "sub-grid";
  .sub-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
      gap: 0px 0px;
      grid-template-areas: "picture-one picture-two";
    }
}

我已经用里面的分页符做了很多测试：

@media print {
  .sub-grid {
    page-break-inside: avoid;
  }
}

但似乎从来没有工作，它总是在打印时打破图像页面。

这是一个重现的小提琴： https ://jsfiddle.net/kwp59x3g/15/

欢迎任何帮助，谢谢大家。

标签： csssasscss-grid

Answer 1

我认为问题出在.grid类中。删除.grid类并添加以下行：

  .text {
    page-break-before: avoid;
    page-break-after: auto;
  }
  .sub-grid {
    page-break-inside: avoid;
  }

.sub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'picture-one picture-two';
}

.picture-one {
  grid-area: picture-one;
}

.picture-two {
  grid-area: picture-two;
}

@media print {
  * {
    overflow: visible !important;
    color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .text {
    page-break-before: avoid;
    page-break-after: auto;
  }
  .sub-grid {
    page-break-inside: avoid;
  }
}

<button onclick="window.print()">
Print
</button>
<div class="grid">
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
    vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
    fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
    ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
    ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
    Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
    faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
    commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
    id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
    quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
    ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
    quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
    congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
    lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
    urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
    senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
    rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
    ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
    a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
    nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
    elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
    consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
    Curabitur fermentum odio sit amet luctus sollicitudin.
  </div>
  <div class="sub-grid">
    <img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
    <img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
  </div>
</div>

您可以使用以下方法打破分页符（使用内部分页符）：

• 表
• 浮动元素
• 带边框的块元素

display: grid并且display: flex不能正常工作，它看起来像一些旧错误。关联