break-after

Свойство break-after определяет разрыв колонки после элемента в многоколоночном элементе при печати. На момент издания статьи не поддерживалось основными браузерами, браузеры Safari и Chrome поддерживают аналогичное свойство -webkit-column-break-after. Не стоит путать данное свойство со свойством page-break-after определяющим разрыв станицы, а не колонки. Свойство применимо к блочным элементам, создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Дополнительные свойства применяемые к break-after

Свойство	Описание
break-before	Определяет разрыв колонки до элемента
break-inside	Определяет разрыв колонки внутри элемента
page-break-after	Определяет разрыв страницы после элемента
page-break-before	Определяет разрыв страницы до элемента
page-break-inside	Определяет разрыв страницы внутри элемента
-webkit-column-break-after	Альтернативное свойство для Safari и Chrome определяющее разрыв колонки после элемента
-webkit-column-break-before	Альтернативное свойство для Safari и Chrome определяющее разрыв колонки до элемента
-webkit-column-break-inside	Альтернативное свойство для Safari и Chrome определяющее разрыв колонки внутри элемента

Дополнительные значения применяемые к break-after

Значение	Описание
auto	Разрыв страницы и колонки производит браузер (принудительного разрыва нет)
always	Разрыв страницы производится после элемента
avoid	Избегать разрыва страницы и колонки после элемента
left	Происходит пропуск одной или двух страниц,чтобы следующая страница была чётной находясь с лева
right	Происходит пропуск одной или двух страниц,чтобы следующая страница была не чётной находясь с права
page	Принудительный разрыв страницы после элемента
column	Принудительный разрыв колонки после элемента
avoid-page	Избегать разрыва страницы после элемента
avoid-column	Избегать разрыва колонки после элемента

Свойство работает в браузерах

Работает с применением альтернативного свойства

Пример применения свойства

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство break-after</title>
<style type="text/css">
<!--
h1 {
text-align:center;
color:#636363;
}
p#avoid {
break-after:avoid;
padding:5px;
background-color:green;
font-size:20px;
color:red;
}
p#avoid-page {
break-after:avoid-page;
padding:5px;
background-color:red;
font-size:20px;
color:green;
}
p#avoid-column {
break-after:avoid-column;
padding:5px;
background-color:indigo;
font-size:20px;
color:yellow;
}
-->
</style>
</head>
<body>
<h1>При печати, после того как свойство будет чмыкать в браузерах, разрывов строк и колонок происходить не будет</h2>
<p id="avoid">Избегаем разрыва колонок и страниц</p>
<p id="avoid-page">Избегаем разрыва страниц</p>
<p id="avoid-column">Избегаем разрыва колонок</p>
</body>
</html>

Пример в действии

При печати, после того как свойство будет чмыкать в браузерах, разрывов строк и колонок происходить не будет

Избегаем разрыва колонок и страниц

Избегаем разрыва страниц

Избегаем разрыва колонок

Источник: http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Позиционирование | Добавил: evkuriy (11.07.2013)

Просмотров: 766 | Теги: свойства CSS, позиционирование | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]