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

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

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

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

Ура!

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

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

Ответ 1

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

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

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

Ответ 2

Кредит переходит на блог david walsh

@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; }
}

Ответ 3

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

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

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