HTML-тег разрыва страницы не работает

Я создаю HTML-страницу в UIWebView на iOS 11. Я печатаю эту страницу с 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 находится на предыдущей странице.

Источник

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;
}
Источник
Другие вопросы по тегам