page-break-inside не работает в Chrome ?
У меня есть несколько абзацев на странице:
...
...
...
Правило CSS для этих абзацев:
p {
margin: 20px 0;
page-break-inside: avoid;
}
Живая демонстрация: http://jsfiddle.net/KE9je/ 2 / show /
Если я правильно понимаю свойство page-break-inside , то приведенное выше должно гарантировать, что ни один абзац не будет разделен между двумя страницами. (Абзац либо отображается на «текущей» странице, либо, если он не помещается полностью, он перемещается на следующую страницу.)
Похоже, это не работает в Chrome. Откройте демонстрацию, щелкните страницу правой кнопкой мыши и выберите «Печать ...». Вы увидите предварительный просмотр печати - пятый абзац разделен между страницами 1 и 2.
Что я делаю не так? Как я могу заставить это работать в Chrome?
1 ответ
Вот то, как я решил это при записи css для печати.
, Например, Вы помещаете некоторые изображения в файл HTML как это:
<div class="bottom">
<figure>
<img src="img01.jpg" alt="Front View">
<figcaption>Front View</figcaption>
</figure>
<figure>
<img src="img02.jpg" alt="Rear View">
<figcaption>Rear View</figcaption>
</figure>
</div>
И запись css как это:
.bottom figure{
page-break-inside: avoid;
}
Иногда это won’t работают, как Вы ожидаете, потому что значение по умолчанию дисплея для большинства элементов является блоком или встроенный, который не является вЂpage-повреждением friendly’. Я обычно изменяю его как это:
.bottom{
display: contents;
}
Это имеет целью исчезать контейнер, делая дочерних детей элементов элемента, который следующие выравнивают в DOM.
Что касается Вашего вопроса, я предлагаю, чтобы Вы взглянули на режим отображения контейнера абзаца, чтобы видеть, установлен ли он заблокироваться. Если так, измените его на содержание и попробуйте еще раз.
я надеюсь эта справка.