我的HTML + CSS

我不确定jsfiddle是否对测试打印选项很有用。

在下文中，请注意我使用page-break-inside: avoid;作为图块。它们仍然在谷歌Chrome版本60.0.3112.101（官方版本）（64位）中被打破。（刚刚测试过：在Firefox中运行）

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Div break sample</title>
  <style>
    .content {
      grid-area: content;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 50% 50%;
      grid-auto-flow: row;
      background-color: #fff;
      color: #444;
      border-radius: 5px;
      margin-bottom: 2rem;
      padding: 20px;
    }
    
    .tile {
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: white;
      color: black;
      width: 100%;
      height: 320px;
      padding: 2.5vh 2.5vw;
      -webkit-box-sizing: border-box;
      overflow: auto;
      overflow-y: hidden;
      page-break-inside: avoid;
      page-break-after: always;
      margin: 5px;
    }
    
    @media print {
      @page {
        size: auto;
        margin: 0mm;
      }
      .content {
        grid-area: content;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 100%;
        grid-auto-flow: row;
      }
      .tile {
        height: auto;
        page-break-inside: avoid;
      }
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="tile">
      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.
    </div>

    <div class="tile">
      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.
    </div>

    <div class="tile">
      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.
    </div>

    <div class="tile">
      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.
    </div>

    <div class="tile">
      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.
    </div>
  </div>
</body>

</html>

＆＃13;

如何防止div出现分页？

我的HTML + CSS

0 个答案: