代码之家 › 专栏 › 技术社区 › christopher.online

html标记内的分页符不起作用

page-break-inside uiwebview pdf css html

christopher.online · 技术社区 · 7 年前

我正在iOS 11上的UIWebView中构建一个html网页。我用 UIPrintFormatter 和 UIPrintPageRenderer (生成PDF)。

标签 page-break-inside: avoid; 不受尊重,且 container-row 打印时元素仍在内部断裂。断裂似乎并不总是发生,大多数情况下都很好。我看到了 集装箱行 在几个地方打断内部,但不要在文本中打断。无论是否使用自定义字体,似乎都会发生内部破坏。

我构建div及其相关css的方式是否有问题? 如何防止 集装箱行 从根本上防止断裂?

整页: 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;
    }

例如红色部分是 集装箱行 其余的 集装箱行 位于上一页。

1 回复 | 直到 7 年前

christopher.online 7 年前

通过如下调整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;
}