Question

如果我不在我的 CSS 中处理分页符，那么有时打印视图中的行会被刮掉，这样它们就会变得丑陋且难以阅读：

为了解决这个问题，我在选定的 break-inside: avoid; 元素的印刷媒体样式中使用了 <p>。这修复了分页符时的剃须问题：

但是当我这样做时，在标题之后出现了新的分页符，这些分页符无缘无故地出现。这是 Firefox DevTools 中的分页输出预览：

这是打印预览：

我制作了一个精简版的页面片段来演示效果：

@charset "UTF-8";
:root {
  --background: rgb(226, 226, 253);
  --navlinks: rgb(1, 131, 128);
  --hovercolor: rgb(1, 61, 128);
  --currentcolor: rgb(1, 31, 128);
  --debugborder: none;
  --accents: 2px solid var(--navlinks);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: serif;
  font-weight: 400;
  font-size: 20px;
  counter-reset: section subsection subsubsection;
}

.container {
  margin-right: auto;
  margin-left: auto;
  max-width: 17cm;
  padding: 0;
}

div#caps>p:first-child:first-letter {
  color: #903;
  float: left;
  font-size: 500%;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

h1 {
  font-family: Helvetica, sans-serif;
}

h2,
h3 {
  font-family: Helvetica, sans-serif;
}

.current {
  color: var(--currentcolor);
}

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  header {
    display: none;
  }
  footer {
    display: none;
  }
  .print-header {
    display: block;
  }
  p#front {
    break-after: avoid;
  }
  div#caps > p { break-inside: avoid; }
}

@media screen and (min-width: 800px) {
  .print-header {
    display: none;
  }
  .nav-toggle-label {
    display: none;
  }
  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
  }
  .logo {
    grid-column: 2 / 3;
  }
  nav {
    all: unset;
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  nav a {
    opacity: 1;
    position: relative;
  }
  nav ul {
    display: flex;
    justify-content: flex-end;
    border: var(--debugborder);
  }
  nav li {
    margin-left: 2em;
    margin-bottom: 0;
  }
  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: var(--hovercolor);
    transform: scale(1, 1);
    position: absolute;
    top: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transform-origin: right;
    transition: transform ease-in-out 150ms;
  }
  nav a:hover::before {
    transform: scale(1, 1);
    transition: 150ms;
  }
}

<!doctype html>
<html lang="en-CA">

<head>

  <title>Lorem ipsum is the way</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- My CSS -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <main class="content container">
    <div class="container">

      <h1 class="print-header">Joe Bloggs' Blog</h1>
      <h1>Lorem ipsum is the way</h1>
      <p id="front">
        09 Apr 2021- <a href="/authors/joe.html">Joe Bloggs</a>
      </p>
      <div id="caps">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
          te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
          nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

        <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
          aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
          et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
          At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem
          ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>

        <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
          ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
          kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
          sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
          duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
          te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat
          nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      </div>

  </main>
</body>

</html>

（不幸的是，运行代码片段不足以重现问题；您需要将其复制到一个文件并在本地进行测试。抱歉。打印问题不是很有趣吗？:|)

请注意，在打印样式中设置 p { overflow:visible; } 没有效果，句子仍然被剃光（是的，检查员说正在应用样式）。

我该如何解决这个问题？

注意：我使用 @media 规则创建了印刷媒体样式，并且正在 Linux 上的 Firefox 87.0 中进行测试。请注意，原始页面是由 Jekyll 生成的，但我也可以在非模板的直接 HTML 页面中重现这一点。

使用@media 规则时，如何防止打印输出中出现不需要的分页符？

0 个答案: