page-break-inside html標記不起作用

Question

我正在iOS 11的UIWebView中構建html網頁。我使用UIPrintFormatter和UIPrintPageRenderer （生成PDF）打印該網頁。

標簽page-break-inside: avoid; 不兌現，並且在打印時container-row元素仍會在內部中斷。 斷裂似乎並不總是會發生，在大多數情況下都可以正常工作。 我在幾個地方看到了container-row中斷，但是在文本中卻沒有看到。 不論是否使用自定義字體，似乎都可能發生內部破壞。

我如何構建div及其關聯的CSS出了點問題？ 如何防止container-row破裂？

整個頁面： https : //jsfiddle.net/2fj13tt7

身體：

<body>
  <div class="doc">
    <div class="container-row">
      <div class="date">
        <span>1. July 2017</span>
      </div>
      <div class="container leftSide">
        <div class="item">Item C</div>
        <p>Test 123</p>
      </div>
    </div>
    <div class="container-row">
      <div class="container rightSide">
        <div class="item">Item B</div>
        <p>Some Text</p>
      </div>
    </div>
    <div class="container-row">
      <div class="container rightSide">
        <div class="item">Item A</div>
        <img class="image" src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <!-- plus 100 more "container-row" -->
  </div>
</body>

CSS：

    @font-face {
      font-family: 'Liberation Sans';
      src: url('LiberationSans-Regular.ttf') format("truetype");
    }
    @font-face {
      font-family: 'LiberationSans-Bold';
      src: url('LiberationSans-Bold.ttf') format("truetype");
    }

    @media print {
      .container-row {
        page-break-inside: avoid;
      }
    }

    body {
      font-family: 'Liberation Sans', sans-serif;
      background-color: transparent;
      margin: 0 !important;
      padding: 0 !important;
    }

    .container-row {
      display: block;
      float: left;
      width: 100%;
      font-family: Liberation Sans, sans-serif;
      font-size: 10px;
    }

    .date {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .date span {
      padding: 5px;
      border-radius: 7px;
    }

    .container {
      max-width: 75%;
      word-wrap: break-word;
      margin: 10px 10px 0px 10px;
      overflow: hidden;
    }

    .leftSide {
      float: left;
      border-top-left-radius: 13px;
      border-top-right-radius: 13px;
      border-bottom-right-radius: 13px;
    }

    .rightSide {
      float: right;
      border-top-left-radius: 13px;
      border-top-right-radius: 13px;
      border-bottom-left-radius: 13px;
    }

    .item {
      font-family: 'LiberationSans-Bold', sans-serif;
      margin: 7px 10px 1px 10px;
    }

    .container p {
      margin-top: 0px;
      margin-left: 10px;
      margin-bottom: 7px;
      margin-right: 10px;
      padding: 0px;
    }

    .image {
      width: 100%;
      margin: 5px 0px -5px;
    }

例如 紅色部分是底部container-row的其余container-row是以前的頁面上。

Answer 1

通過如下調整css解決了該問題：

.container-row {
  display: inline-block; /* should prevent breaking */
  float: left;
  width: 100%;
  font-family: Liberation Sans, sans-serif;
  font-size: 10px;
}

.container {
  max-width: 75%;
  margin: 10px 10px 0px 10px;
  overflow: hidden;
}

.container p {
  margin-top: 0px;
  margin-left: 10px;
  margin-bottom: 7px;
  margin-right: 10px;
  padding: 0px;
  word-wrap: break-word;
}

page-break-inside html標記不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2018-04-03 14:30:14

page-break-inside html標記不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2018-04-03 14:30:14

解決方案1
0 已采納 2018-04-03 14:30:14