Html разрыв страницы при печати – html — Запрет разрыва страницы между заголовком и текстом при печати (CSS)

Содержание

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, always412171.21
avoid, left, right412171.2
 
auto, always1171.3
avoid, left, right171.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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, always412171.21
avoid, left, right412171.2
 
auto, always1171.3
avoid, left, right171.3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Разрыв страницы для печати с использованием 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>Амбулакральная система обычна для иглокожих. Каждая

Отправить ответ

avatar
  Подписаться  
Уведомление о