无序列表 page-break-inside：避免不工作和与页脚重叠

Question

无序列表 page-break-inside：避免不工作和与页脚重叠

我创建了一个包含页眉、页脚和主要内容的页面。主要内容由 Bootstrap 4 卡列表组组成。

我正在尝试制作列表的可打印版本。预期结果是列表元素不会在页面之间中断。但是，page-break-inside: avoid 不起作用并且内容与页脚重叠。

header {
  width: 100%;
  position: fixed;
  top: 0;
}

footer {
  width: 100%;
  position: fixed;
  bottom: 0;
}

main {
  padding-top: 24pt;
  padding-bottom: 48pt;
}

@media print {
  li {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap 4 Card</title>

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

  <link rel="stylesheet" href="script.css">
</head>

<body>
  <header>Header</header>
  <main class="container">
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="list-group-item">
          <h5 class="card-title">Title </h5>
          <table class="table table-sm table-bordered">
            <tbody>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
              <tr>
                <th>Field</th>
                <td>Value</td>
              </tr>
            </tbody>
          </table>
        </li>
      </ul>
    </div>
  </main>
  <footer>Footer</footer>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

我最近遇到了类似的问题。事实证明，display:flex;Chrome 的打印布局并不能很好地发挥作用。在我的情况下，它是一个列表组，Bootstrap 必须.list-group {display: flex; }修复我设置的简单使用：

@media print {
  .list-group {
     display: block;
  }
}

Run Code Online (Sandbox Code Playgroud)

然后list-group-item {page-break-inside: avoid; }避免在列表项内分页！

归档时间：	7 年，9 月前
查看次数：	1369 次
最近记录：	7 年，4 月前