Chrome не распознает «прорыв после: избежать» - PullRequest
Новая
       13

Chrome не распознает «прорыв после: избежать»

0 голосов
/ 08 февраля 2020

Я использую Windows 10 с Chrome 79.0.3945.130. У меня есть HTML документы, которые содержат <h3> теги. При печати я хотел бы избежать разрывов страниц сразу после этих тегов.

Кажется, что естественным способом предотвращения разрывов страниц является использование свойства CSS break–after. И я считаю, что это работает в Microsoft Edge. Но я не могу заставить его работать в Chrome. Вот минимальный пример: 

<html>

  <head><title>Getting CSS page breaks to work</title></head>

  <body>

    <style>
      h3 { break-after: avoid; }
      .tall { 
        height: 9.5in;
        background-color: blue;
      }
    </style>

    <div class="tall"></div>

    <h3>Section heading</h3>
    <p>Lorem ipsum dolor.</p>

  </body>
</html>

Когда я печатаю этот документ или что-то подобное в Edge, он печатается так, как должен. Но когда я печатаю его в Chrome, заголовок <h3> появляется внизу страницы, а следующий текст <p> появляется вверху следующей страницы. Я хочу предотвратить разрыв страницы между <h3> и <p>.

Я могу обойти эту проблему, обернув тег <h3> и <p> в div и установив break–inside: avoid для этого div. Но это решение неудовлетворительно: это ad ho c, требующее от меня сначала выявить все случаи, в которых появляются неподходящие перерывы.

Я пробовал много вариантов на примере, приведенном здесь. Например, я попытался установить свойства break- * в сочетании с селектором ::after, как в h3::after { break-after: avoid; }. Но мне не удалось предотвратить разрывы страниц.

Есть также некоторые похожие посты, например:

  1. CSS Печать: избегая сокращения в два раза DIV между страницами?
  2. page-break / webkit-region-break больше не работает в chrome больше? )

но дан совет с приведенным выше примером это не поможет.

Что еще я могу сделать?

...