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

#html #css #printing

#HTML #css #печать

Вопрос:

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

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

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

Приветствия!

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

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

1. это боль, но экспорт в PDF …

2. Если бы вы могли опубликовать образец html-документа для работы, это помогло бы проверить возможные ответы.

3. Какая именно версия FF? Я использую последнюю версию, и она обычно разделяет UL.

4. также вы пробовали применять свойства сирот или вдов? они и разрыв страницы поддерживаются в ff3.5

Ответ №1:

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

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

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

Ответ №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; }
}

1. Да, я использовал Google, чтобы найти это решение — просто еще один ресурс в моем распоряжении. Честно говоря, я не уверен, кого волнует, какую поисковую систему я использовал. Я тестировал в каждом браузере, который я установил (IE8, FF4, FF5, FF6 и FF8, Opera 11 и Safari 5) — работал во всех из них.

2. @JoshStodola — не имеет значения, откуда взят правильный ответ, если указан источник, и это помогает человеку, задающему вопрос.

Ответ №3:

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

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

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