page-break-after | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ | ||
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Добавляет разрыв страницы при печати документа после заданного элемента.
Синтаксис
page-break-after: always | auto | avoid | left | right | inherit
Значения
- always
- Всегда добавляет разрыв страницы после элемента.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы после элемента.
- left
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была четной.
- right
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечетной.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page-break-after</title>
<style>
@media print {
.more {
page-break-after: always;
}
}
</style>
</head>
<body>
<h3>Мусорные пакеты</h3>
<p>История о том, как однажды мусорных пакетов оказалось несколько больше,
чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
<p>Читать дальше</p>
</body>
</html>Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.
Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.
Свойство page-break-after | CSS справочник
CSS свойстваОпределение и применение
CSS свойство page-break-after определяет наличие или отсутствие разрыва страницы после заданного элемента при печати документа.
Обращаю Ваше внимание, что данное свойство нельзя применять к пустым блочным элементам (например, к пустому <div> ), либо к элементам с абсолютным позиционированием (position: absolute;).
Это свойство находится в стадии замены на более универсальное и функциональное в будущем свойство break-after. Планируется, что новое свойство будет применяться не только при разрыве страниц(при печати), a также при разрыве в определённых областях и многоколоночных текстах.
Поддержка браузерами
CSS синтаксис:
page-break-after:"auto | always | avoid | left | right | initial | inherit";
JavaScript синтаксис:
object.style.pageBreakAfter = "avoid"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Разрыв страниц после элемента (при печати) происходит в автоматическом режиме (при необходимости). Это значение по умолчанию. |
| always | Всегда добавляет при печати разрыв страниц после элемента. |
| avoid | Запрещает при печати разрыв страниц после элемента (если возможно). |
| left | Осуществляет разрыв одной или двух страниц (при печати) после элемента, таким образом, чтобы следующая страница форматировалась как левая страница (четная страница). Значение работает только в IE и Edge. |
| right | Осуществляет разрыв одной или двух страниц (при печати) после элемента, таким образом, чтобы следующая страница форматировалась как левая страница (нечетная страница). Значение работает только в IE и Edge. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS2Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства page-break-after</title>
<style>
p {
font-size: 15px; /* устанавливаем размер шрифта для абзацев */
}
h3 {
page-break-after: always; /* всегда добавляет при печати разрыв страниц после элемента h3 */
}
</style>
</head>
<body>
<a href = "https://ru.wikipedia.org/wiki/Морские_ежи" title = "Статья о Морских ежах с сайта Википедия">Материал из Википедии — свободной энциклопедии</a>
<h2>Морские ежи</h2>
<p>Тело морских ежей обычно почти сферическое, размером от 2—3 до 30 см; покрыто рядами известковых пластинок. Пластинки, как правило, соединены неподвижно и образуют плотный панцирь (скорлупу), не позволяющий ежу изменять форму. По форме тела (и некоторым иным признакам) морские ежи подразделяются на правильных и неправильных. У правильных ежей форма тела почти круглая, и построены они по строго радиальной пятилучевой симметрии. У неправильных ежей форма тела уплощённая, и у них различимы передний и задний концы тела.</p>
<p>С панцирем морских ежей подвижно соединены (при помощи суставной сумки с мышечными волокнами) иглы разнообразной длины. Длина колеблется от 1—2 мм (плоские ежи, Echinarachniidae) до 25—30 см (диадемовые ежи, Diadematidae). Есть вид, полностью лишённый игл — токсопнеустес (Toxopneustes), тело которого усеяно педицелляриями. Иглы зачастую служат морским ежам для передвижения, питания и защиты. У некоторых видов они ядовиты, так как соединены с особыми ядовитыми железами. Ядовитые виды (Asthenosoma, Diadema) распространены в основном в тропических и субтропических районах Индийского, Тихого и Атлантического океанов.</p>
<p>Кроме игл, на поверхности панциря морских ежей сидят педицеллярии, а также, у ротового отверстия, особые органы равновесия — сферидии. У некоторых видов педицеллярии также снабжены ядовитыми железами (Toxopneustes, Sphaerechinus).</p>
<p>Амбулакральная система обычна для иглокожих. Каждая амбулакральная ножка, снабжённая присоской, проходит сквозь скелетные пластинки панциря двумя веточками (через 2 поры). Амбулакральные ножки нижней стороны служат морским ежам для передвижения и рытья нор. Ножки спинной стороны преобразовались в органы осязания и дыхания. У некоторых видов амбулакральные ножки наряду с иглами и педицелляриями принимают активное участие в процессе очищения панциря и питания.</p>
<p>Рот у морских ежей расположен в центре нижней (оральной) стороны тела; анальное и половые отверстия — обычно в центре верхней (аборальной) стороны. У правилpage-break-after | CSS | WebReference
Добавляет разрыв страницы при печати документа после заданного элемента.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Анимируется | Нет |
Синтаксис ?
page-break-after: always | auto | avoid | left | rightОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- always
- Всегда добавляет разрыв страницы после элемента.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы после элемента.
- left
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была чётной.
- right
- Пропускает одну или две страницы после элемента, чтобы следующая страница при печати была нечётной.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>page-break-after</title> <style> @media print { .more { page-break-after: always; } } </style> </head> <body> <h3>Мусорные пакеты</h3> <p>История о том, как однажды мусорных пакетов оказалось несколько больше, чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p> <p>Читать дальше</p> </body> </html>
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
| auto, always | 4 | 12 | 1 | 7 | 1.2 | 1 |
| avoid, left, right | 4 | 12 | 1 | 7 | 1.2 |
| auto, always | 1 | 1 | 7 | 1.3 |
| avoid, left, right | 1 | 7 | 1.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
page-break-before | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 7.0+ | 1.2+ | 1.0+ | ||
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Добавляет разрыв страницы при печати документа перед заданным элементом.
Синтаксис
page-break-before: always | auto | avoid | left | right | inherit
Значения
- always
- Всегда добавляет разрыв страницы перед элементом.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы перед элементом.
- left
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была четной.
- right
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечетной.
- inherit
- Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>page-break-before</title> <style> @media print { .more { page-break-before: always; } } </style> </head> <body> <h3>Мусорные пакеты</h3> <p>История о том, как однажды мусорных пакетов оказалось несколько больше, чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p> <p>Читать дальше</p> </body> </html>
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значения left, right и inherit.
Браузеры Firefox, Chrome и Safari не поддерживают значения avoid, left и right.
page-break-before | CSS | WebReference
Добавляет разрыв страницы при печати документа перед заданным элементом.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Анимируется | Нет |
Синтаксис ?
page-break-before: always | auto | avoid | left | rightОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- always
- Всегда добавляет разрыв страницы перед элементом.
- auto
- Вставляет разрыв страницы при необходимости.
- avoid
- Запрещает разрыв страницы перед элементом.
- left
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была чётной.
- right
- Пропускает одну или две страницы перед элементом, чтобы следующая страница при печати была нечётной.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page-break-before</title>
<style>
@media print {
.more {
page-break-before: always;
}
}
</style>
</head>
<body>
<h3>Мусорные пакеты</h3>
<p>История о том, как однажды мусорных пакетов оказалось несколько больше,
чем хотелось, как и для чего их можно использовать, и что из этого получилось.</p>
<p>Читать дальше</p>
</body>
</html> Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры ?
| auto, always | 4 | 12 | 1 | 7 | 1.2 | 1 |
| avoid, left, right | 4 | 12 | 1 | 7 | 1.2 |
| auto, always | 1 | 1 | 7 | 1.3 |
| avoid, left, right | 1 | 7 | 1.3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
Разрыв страницы для печати с использованием CSS3
Хотя мы живем в цифровую эпоху, где все может быть легко доступно, все еще есть много людей, которые предпочитают читать длинный текст с бумаги. Есть вероятность, что часть пользователей распечатает текст с вашего сайта, чтобы читать его не за компьютером.
Возможность приведения содержимого в вид, подходящий для печати, существовала давно. Мы можем сделать это, используя правило @media в таблице стилей, следующим образом:
@media print {
/* Правила стиля */
}Есть несколько свойств, позволяющих оформить содержимое веб-страницы для приведения в вид, подходящий для печати, и мы расскажем об одном из них: разрыве страницы.
Что оно делает?
Если вы работали с текстовыми редакторами, такими как Microsoft Word и Pages, вам должно быть знакомо меню разрыва страницы, которое позволяет перенести текст на следующую страницу.
Этот модуль делает то же самое, позволяя управлять тем, как будет переносится содержимое веб-страницы, страница за страницей.
Использование разрыва страницы
Для примера мы создали демонстрационную страницу, которую собираемся распечатать. Мы нашли на ней неудачный перенос, как вы можете видеть ниже.
Будет лучше выглядеть, если заголовок и нижняя висячая строка начнутся на следующей странице.
Чтобы это сделать, мы используем свойство page-break-after и зададим ему значение always , чтобы заставить следующий элемент перейти на следующую страницу.
.page-break {
page-break-after: always;
}Затем вы можете создать между элементов новый элемент с классом, или назначить класс предыдущему элементу таким образом.
<p>With the <strong>Eraser</strong> feature, you can take composites of a photo, then put all of that together, to get the background without the extras you don’t. </p> <h4>The phone to travel With</h4> <p><strong>S Translator </strong>is going to be a great tool for your travels as ... </p>
Теперь заголовок и нижняя висячая строка начнутся на следующей странице.
Верхние и нижние висячие строки
Вышеописанный метод может быть утомительным, если у вас много текста. Так что вместо того, чтобы заставлять содержимое переходить на следующую страницу, будет лучше задать минимальный порог для верхней и нижней висячих строк.
В типографской практике верхними и нижними висячими строками называют оставшиеся слова и короткие строки, которые выглядят оторванными от остального абзаца на другой странице.
Используя свойства orphans (нижняя висячая строка) и widows (верхняя висячая строка) мы можем задать минимальный порог. В приведенном ниже примере мы задаем, чтобы как минимум три строки остались внизу или в начале абзаца, где происходит разрыв страницы.
p {
orphans: 3;
widows: 3;
} Дополнительные источники
Мы рассмотрели основы использования разрыва страницы на печати для текстов на сайте, и мы надеемся, что это вдохновит вас обдумать стили для печати вашего сайта, чтобы содержимое хорошо выглядело как на экране, так и на бумаге.
Автор урока Thoriq Firdaus
Перевод — Дежурка
Смотрите также:
Свойство break-after | CSS справочник
CSS свойстваОпределение и применение
CSS свойство break-after определяет как проиходят разрывы страниц (при печати), колонок или определённых областей после указанного элемента.
Обращаю Ваше внимание, что данное свойство нельзя применять к пустым блочным элементам (например, к пустому <div> ), либо к элементам с абсолютным позиционированием (position: absolute;).
Планируется, что в будущем это свойство станет полноценной заменой свойства page-break-after, как более универсальное и функциональное, но в настоящее время его применение не рекомендуется.
Поддержка браузерами
CSS синтаксис:
break-after:"auto | always | avoid | left | right | page | column | avoid-page | avoid-column | initial | inherit";
JavaScript синтаксис:
object.style.breakAfter = "always"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Разрыв страниц после элемента (при печати), колонок, определенных областей происходит в автоматическом режиме (при необходимости). Это значение по умолчанию. |
| always | Всегда добавляет при печати разрыв страниц после элемента. |
| avoid | Запрещает при печати разрыв страниц после элемента (если возможно). |
| left | Осуществляет разрыв одной или двух страниц (при печати) после элемента, таким образом, чтобы следующая страница форматировалась как левая страница (четная страница). |
| right | Осуществляет разрыв одной или двух страниц (при печати) после элемента, таким образом, чтобы следующая страница форматировалась как левая страница (нечетная страница). |
| page | Осуществляет обязательный разрыв и переход к новой странице после элемента. |
| column | Осуществляет обязательный разрыв и переход к новой колонке после элемента. |
| avoid-page | Предотвращает разрыв страницы после текущего элемента. |
| avoid-column | Предотвращает разрыв колонки после текущего элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства break-after</title>
<style>
p {
font-size: 15px; /* устанавливаем размер шрифта для абзацев */
}
h3 {
break-after: always; /* всегда добавляет при печати разрыв страниц после элемента h3 */
}
</style>
</head>
<body>
<a href = "https://ru.wikipedia.org/wiki/Морские_ежи" title = "Статья о Морских ежах с сайта Википедия">Материал из Википедии — свободной энциклопедии</a>
<h2>Морские ежи</h2>
<p>Тело морских ежей обычно почти сферическое, размером от 2—3 до 30 см; покрыто рядами известковых пластинок. Пластинки, как правило, соединены неподвижно и образуют плотный панцирь (скорлупу), не позволяющий ежу изменять форму. По форме тела (и некоторым иным признакам) морские ежи подразделяются на правильных и неправильных. У правильных ежей форма тела почти круглая, и построены они по строго радиальной пятилучевой симметрии. У неправильных ежей форма тела уплощённая, и у них различимы передний и задний концы тела.</p>
<p>С панцирем морских ежей подвижно соединены (при помощи суставной сумки с мышечными волокнами) иглы разнообразной длины. Длина колеблется от 1—2 мм (плоские ежи, Echinarachniidae) до 25—30 см (диадемовые ежи, Diadematidae). Есть вид, полностью лишённый игл — токсопнеустес (Toxopneustes), тело которого усеяно педицелляриями. Иглы зачастую служат морским ежам для передвижения, питания и защиты. У некоторых видов они ядовиты, так как соединены с особыми ядовитыми железами. Ядовитые виды (Asthenosoma, Diadema) распространены в основном в тропических и субтропических районах Индийского, Тихого и Атлантического океанов.</p>
<p>Кроме игл, на поверхности панциря морских ежей сидят педицеллярии, а также, у ротового отверстия, особые органы равновесия — сферидии. У некоторых видов педицеллярии также снабжены ядовитыми железами (Toxopneustes, Sphaerechinus).</p>
<p>Амбулакральная система обычна для иглокожих. Каждая