Как избежать разрыва страницы при печати длинных списков

Question

Я делаю некоторые стили для печатной брошюры на сайте моего клиента, которая потенциально может содержать длинные неупорядоченные списки информации.

Моя проблема заключается в том, что при печати в Firefox вся <UL> будет разбиваться на новую страницу, а не на дочерние <li>, что означает, что она не будет передаваться вместе с другим содержимым на странице.

Я обнаружил, что свойство CSS page-break-inside поддерживается только в Opera и IE8, кто-нибудь знает об альтернативе этому свойству или о другом методе, который я могу использовать, чтобы не допустить взлома всего списка на новой странице.

Ура!

ОБНОВЛЕНИЕ [23.11.2011]: Я смог обойти мою проблему, поскольку печатный документ генерируется в ответ на выбор пользователя, поэтому эта страница будет только печататься. Я (очень неохотно) отодвинул семантику в сторону, удалил UL и заменил LI на DIVs, которые правильно ломаются. Тем не менее, этот вопрос остается в силе для тех, у кого похожая проблема, но используется тот же HTML для печати и экрана.

Я воспроизведу возникшую проблему и опубликую необходимые HTML и CSS, как только смогу.

Answer 1

Попробуйте программно удалить теги UL для версии для печати. Вы должны быть в состоянии заставить элементы LI отображать то же самое с некоторыми стилями.

JavaScript или даже jQuery могут справиться с этим достаточно легко, но я уверен, что вы могли бы позаботиться об этой стороне сервера.

Я знаю, что это технически недопустимый HTML, но иногда вам нужно изменить правила, когда HTML / CSS не предлагает вам гибкости.

Answer 2

Кредит идет в блог Дэвида Уолша

@media screen {
  .page-break  { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
  .page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}

Answer 3

Для немного лучшей поддержки браузера вы можете использовать это:

ul li {
  page-break-after: avoid;
  }
ul li:first-child {
  page-break-after: auto;
  }

Должно работать и в IE7. Но не будет работать в Firefox. Браузеры просто отстой, когда дело доходит до печати. ​​