内部分页符避免在 flex 中无法按预期工作

Question

我有一个容器，其中包含几个 2 列布局的 div。我希望在转换为 pdf 时在新页面中打印 div。

我浏览了一些关于 page-break-inside 的文章，但并不顺利。也尝试了很多SO答案，都是我运气不好。

我不明白为什么 page-break-inside:avoid 在我的代码中不起作用。

我希望 .item class 在两页中间跳转到新页。

完整代码如下：

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 0 50%;
  box-sizing:border-box;
     border:2px solid red;
}

@media print {
    .container>div {
        display: block;
        page-break-inside: avoid;
    }
}

<div class="container">
  <div class="item">1. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">2 . Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">3. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
  <div class="item">4. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ip</div>
   <div class="item">5. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
   <div class="item">6. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of</div>
</div>

希望得到答案

也尝试过 bootstrap，但仍然没有成功。下面是使用 bootstrap.

的代码

https://codepen.io/chintuyadav/pen/wvaMZQg?editors=1100

提前感谢您的宝贵时间。

Answer 1

Page-break-inside 适用于根元素正常流中的 block-level 个元素。

用户代理也可以将其应用于其他元素，例如 table-row 个元素。

供参考： https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside

Answer 2

@chintuyadavsara，谢谢，我刚刚运行进入这个问题，你的回答让我想到了这个问题。我的 div 包含在另一个显示设置为 flex 的 div 中。它没有帮助我找到解决方案，但至少我知道它为什么不起作用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test break-inside: avoid;</title>
    <style>
      .flex_container {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
      }
      .content_box {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        background-color: white;
        height: 250px;
        width: 250px;
        display: block;
        border-radius: 20px;
        padding: 10px;
        text-align: center;
        margin: 25px;
        cursor: pointer;
        overflow: hidden;
        
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="flex_container">
      <div class="content_box">Sample 1</div>
      <div class="content_box">Sample 2</div>
      <div class="content_box">Sample 3</div>
      <div class="content_box">Sample 4</div>
      <div class="content_box">Sample 5</div>
      <div class="content_box">Sample 6</div>
      <div class="content_box">Sample 7</div>
      <div class="content_box">Sample 8</div>
      <div class="content_box">Sample 9</div>
      <div class="content_box">Sample 10</div>
      <div class="content_box">Sample 11</div>
      <div class="content_box">Sample 12</div>
      <div class="content_box">Sample 13</div>
      <div class="content_box">Sample 14</div>
      <div class="content_box">Sample 15</div>
      <div class="content_box">Sample 16</div>
    </div>
  </body>
</html>

刚刚找到解决方案。

flex_container：将显示：flex 更改为显示：table
flex_container:删除flex-wrap:换行;
content_box：更改显示：块显示：inline-block

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test 2 break-inside: avoid;</title>
    <style>
      .flex_container {
        display: table;
        margin-right: -15px;
        margin-left: -15px;
      }
      .content_box {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
        background-color: white;
        height: 250px;
        width: 250px;
        display: inline-block;
        border-radius: 20px;
        padding: 10px;
        text-align: center;
        margin: 25px;
        cursor: pointer;
        overflow: hidden;
        
        break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="flex_container">
      <div class="content_box">Sample 1</div>
      <div class="content_box">Sample 2</div>
      <div class="content_box">Sample 3</div>
      <div class="content_box">Sample 4</div>
      <div class="content_box">Sample 5</div>
      <div class="content_box">Sample 6</div>
      <div class="content_box">Sample 7</div>
      <div class="content_box">Sample 8</div>
      <div class="content_box">Sample 9</div>
      <div class="content_box">Sample 10</div>
      <div class="content_box">Sample 11</div>
      <div class="content_box">Sample 12</div>
      <div class="content_box">Sample 13</div>
      <div class="content_box">Sample 14</div>
      <div class="content_box">Sample 15</div>
      <div class="content_box">Sample 16</div>
    </div>
  </body>
</html>

内部分页符避免在 flex 中无法按预期工作

Page break inside avoid in flex not working as expected

html

css

page-break-inside