Я хочу распечатать несколько страниц с моего сайта, используя платформу Foundation 5 ccs. В моем css я добавляю следующие строки:
@media print {
hr.page-break{page-break-after:always!important;}
}
Я использую класс .page break, чтобы просто добавить новую страницу для печати, но это не сработало. Когда удаляются все базовые 5 стилей, новые страницы печатаются должным образом. Есть идеи?
Это единственные стили печати для F5 (из /foundation/components/_type.scss), поэтому я не вижу там ничего, что могло бы относиться к hr.
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited { text-decoration: underline;}
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after { content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead { display: table-header-group; /* h5bp.com/t */ }
tr,
img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 { page-break-after: avoid; }
.hide-on-print { display: none !important; }
.print-only { display: block !important; }
.hide-for-print { display: none !important; }
.show-for-print { display: inherit !important; }
}
Кроме того, не верьте, что это должно иметь значение, но я никогда не видел выбора с !important, прикрепленным к значению без пробела между ними, поэтому я бы поставил там пробел.
Я обнаружил, что:
.columns {
float:left;
}
более или менее обнуляет page-break-* атрибуты. Если у ваших элементов есть родитель с классом .columns, это, вероятно, проблема.
Простой способ справиться с этим — удалить поплавок в элементе верхнего уровня, например:
@media print {
div.columns {
float:none;
}
}
Я наткнулся на эту тему, потому что искал более избирательный метод, чтобы сделать то же самое. Это общее изменение может испортить внешний вид вашей страницы.
