文章/答案/技术大牛

发布

社区首页 >问答首页 >page-break-inside html标记不起作用

问page-break-inside html标记不起作用
EN

Stack Overflow用户

提问于 2018-03-01 07:12:17

回答 1查看 452关注 0票数 0

我在iOS 11上的UIWebView中建立一个超文本标记语言网页。我用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的其余部分在上一页。

html

css

pdf

uiwebview

page-break-inside

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-03 22:30:15

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49040218

复制

相似问题

问page-break-inside html标记不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问page-break-inside html标记不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问page-break-inside html标记不起作用
EN