break-before | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Свойства печати


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


break-before | Свойство CSS

Свойство break-before определяет разрыв колонки до элемента.




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




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


Свойство
Описание
break-afterОпределяет разрыв колонки после элемента
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-before


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

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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство break-before</title>
<style type="text/css">
<!--
h1 {
text-align:center;
color:#636363;
}
p#avoid {
break-before:avoid;
padding:5px;
background-color:green;
font-size:20px;
color:red;
}
p#avoid-page {
break-before:avoid-page;
padding:5px;
background-color:red;
font-size:20px;
color:green;
}
p#avoid-column {
break-before: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://www.w3.org/TR/CSS21/page.html#propdef-page-break-before
Категория: Свойства печати | Добавил: IZOTOP (10.05.2012) | Автор: Меренков Михаил E W
Просмотров: 464 | Теги: css, свойство, style, Что делает, для чего, что это, break-before | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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