CSS свойство break-beforecss3

CSS свойства

Определение и применение

CSS свойство break-before определяет как проиходят разрывы страниц (при печати), колонок или определённых областей перед указанным элементом.

Обращаю Ваше внимание, что данное свойство нельзя применять к пустым блочным элементам (например, к пустому <div> ), либо к элементам с абсолютным позиционированием (position: absolute;).

Планируется, что в будущем это свойство станет полноценной заменой свойства page-break-before, как более универсальное и функциональное, но в настоящее время его применение не рекомендуется.

Поддержка браузерами

ЗначениеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
auto, alwaysНетНетНет*Нет10.012.0
avoidНетНетНетНетНетНет
left, rightНетНетНетНет10.012.0
page, columnНетНетНетНет10.012.0
avoid-page, avoid-columnНетНетНетНетНетНет

CSS синтаксис:

break-before:"auto | always | avoid | left | right | page | column | avoid-page | avoid-column | initial | inherit";

JavaScript синтаксис:

object.style.breakBefore = "always"

Значения свойства

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства break-before</title>
<style>
p {
font-size: 15px;  /* устанавливаем размер шрифта для абзацев */
}
h2 {
break-before: always;  /* всегда добавляет при печати разрыв страниц до элемента h2 */
}
</style>
</head>
	<body>
		<a href = "https://ru.wikipedia.org/wiki/Морские_ежи" title = "Статья о Морских ежах с сайта Википедия">Материал из Википедии — свободной энциклопедии</a>
		<h1>Морские ежи</h1>
		<p>Тело морских ежей обычно почти сферическое, размером от 2—3 до 30 см; покрыто рядами известковых пластинок. Пластинки, как правило, соединены неподвижно и образуют плотный панцирь (скорлупу), не позволяющий ежу изменять форму. По форме тела (и некоторым иным признакам) морские ежи подразделяются на правильных и неправильных. У правильных ежей форма тела почти круглая, и построены они по строго радиальной пятилучевой симметрии. У неправильных ежей форма тела уплощённая, и у них различимы передний и задний концы тела.</p>
		<p>С панцирем морских ежей подвижно соединены (при помощи суставной сумки с мышечными волокнами) иглы разнообразной длины. Длина колеблется от 1—2 мм (плоские ежи, Echinarachniidae) до 25—30 см (диадемовые ежи, Diadematidae). Есть вид, полностью лишённый игл — токсопнеустес (Toxopneustes), тело которого усеяно педицелляриями. Иглы зачастую служат морским ежам для передвижения, питания и защиты. У некоторых видов они ядовиты, так как соединены с особыми ядовитыми железами. Ядовитые виды (Asthenosoma, Diadema) распространены в основном в тропических и субтропических районах Индийского, Тихого и Атлантического океанов.</p>
		<p>Кроме игл, на поверхности панциря морских ежей сидят педицеллярии, а также, у ротового отверстия, особые органы равновесия — сферидии. У некоторых видов педицеллярии также снабжены ядовитыми железами (Toxopneustes, Sphaerechinus).</p>
		<p>Амбулакральная система обычна для иглокожих. Каждая амбулакральная ножка, снабжённая присоской, проходит сквозь скелетные пластинки панциря двумя веточками (через 2 поры). Амбулакральные ножки нижней стороны служат морским ежам для передвижения и рытья нор. Ножки спинной стороны преобразовались в органы осязания и дыхания. У некоторых видов амбулакральные ножки наряду с иглами и педицелляриями принимают активное участие в процессе очищения панциря и питания.</p>
		<p>Рот у морских ежей расположен в центре нижней (оральной) стороны тела; анальное и половые отверстия — обычно в центре верхней (аборальной) стороны. У правильных морских ежей рот снабжён жевательным аппаратом (аристотелев фонарь), служащим для соскрёбывания водорослей с камней[2]. Аристотелев фонарь состоит из 5 сложных челюстей, каждая из которых оканчивается острым зубом. Зубы аристотелева фонаря участвуют не только в переработке пищи, но и в передвижении (вонзаясь в грунт), а также предположительно в рытье нор. У неправильных морских ежей, питающихся детритом, жевательного аппарата нет.</p>
		<p>Кишечник не имеет лучевого строения, а представляет трубку, идущую от ротового отверстия по спирали внутри полости тела. Иногда вдоль него идет придаточная кишка, открывающаяся в кишечник обоими концами. Органами дыхания служат наружные кожные жабры, расположенные около рта, амбулакральная система и придаточная кишка.</p>
		<p>Органы чувств и нервная система развиты довольно слабо. Помимо осязательных амбулакральных ножек и сферидиев, у ежей имеются примитивные глазки, расположенные на верхней стороне тела.</p>
		<h2>Образ жизни и питание</h2>
		<p>Широко распространены в океанах и морях с нормальной солёностью на глубинах до 7 км; отсутствуют в малосолёных Каспийском, Чёрном и частично Балтийском морях. Широко распространены на коралловых рифах и в прибрежных водах, часто селясь там в расщелинах и углублениях скал. Правильные морские ежи предпочитают скалистые поверхности; неправильные — мягкий и песчаный грунт.</p>
		<p>Морские ежи — донные ползающие или же зарывающиеся животные. Передвигаются с помощью амбулакральных ножек и игл. По некоторым предположениям, с помощью «аристотелева фонаря» морские ежи просверливают себе норы в скалах, даже гранитных и базальтовых, где прячутся во время отлива и от хищников. Другие виды закапываются в песок или просто прикрывают себя кусками раковин, водорослями и т. д.</p>
		<p>Практически всеядны. Рацион включает водоросли, губок, мшанок, асцидий и разнообразную падаль, а также моллюсков, мелких морских звёзд и даже других морских ежей. Фиолетовый ёж Sphaerechinus granularis легко справляется с раком-богомолом Squilla mantis. Живущие на мягком грунте виды заглатывают песок и ил, переваривая попадающие с ними мелкие организмы.</p>
		<p>Некоторые морские организмы используют морских ежей для защиты, прячась среди их игл: голотурии, офиуры, многощетинковые черви. Паразитические брюхоногие моллюски (Melanellidae), внедряясь в основание игл копьеносных ежей, образуют галлы и тем самым мешают росту иглы. Некоторые виды моллюсков прикрепляют к иглам свои кладки, и развивающиеся моллюски просверливают скорлупу ежа, просовывают внутрь него хоботки и питаются тканями.</p>
		<p>Морские ежи служат пищей для омаров, морских звёзд, рыб, птиц, морских котиков. Главным естественным врагом морского ежа является калан. Поймав ежа, калан либо долго крутит его в лапах (иногда предварительно завернув в водоросли), чтобы примять иголки и потом съедает; либо разбивает ежа камнем на собственной груди. Количество съедаемых каланами ежей столь велико, что кишечник, брюшина и даже кости этих морских млекопитающих порой окрашиваются пигментами морских ежей в фиолетовый цвет.</p>
	</body>
</html>
Пример использования свойства break-before(определяет как проиходят разрывы страниц, колонок или определённых областей перед указанным элементом).
Пример использования свойства break-before(определяет как проиходят разрывы страниц, колонок или определённых областей перед указанным элементом).

Рассмотрим еще применение этого свойства при работе с колоннами:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства break-before (работа с колоннами)</title>
<style>
p {
font-size: 15px;  /* устанавливаем размер шрифта для абзацев */
}
p.first {
break-before: column;  /* осуществляет обязательный разрыв и переход к новой колонке перед элементом с классом first */
}
.container {
-webkit-column-count: 4;  /* для поддержки ранних версий браузеров */
-moz-column-count: 4;  /* для поддержки ранних версий браузеров */
column-count: 4;  /* указываем количество колонок на которое необходимо разбить элемент */
}
</style>
</head>
<body>
<div class = "container">
	<a href = "https://ru.wikipedia.org/wiki/Морские_ежи" title = "Статья о Морских ежах с сайта Википедия">Материал из Википедии — свободной энциклопедии</a>
	<h1>Морские ежи</h1>
	<p>Тело морских ежей обычно почти сферическое, размером от 2—3 до 30 см; покрыто рядами известковых пластинок. Пластинки, как правило, соединены неподвижно и образуют плотный панцирь (скорлупу), не позволяющий ежу изменять форму. По форме тела (и некоторым иным признакам) морские ежи подразделяются на правильных и неправильных. У правильных ежей форма тела почти круглая, и построены они по строго радиальной пятилучевой симметрии. У неправильных ежей форма тела уплощённая, и у них различимы передний и задний концы тела.</p>
	<p>С панцирем морских ежей подвижно соединены (при помощи суставной сумки с мышечными волокнами) иглы разнообразной длины. Длина колеблется от 1—2 мм (плоские ежи, Echinarachniidae) до 25—30 см (диадемовые ежи, Diadematidae). Есть вид, полностью лишённый игл — токсопнеустес (Toxopneustes), тело которого усеяно педицелляриями. Иглы зачастую служат морским ежам для передвижения, питания и защиты. У некоторых видов они ядовиты, так как соединены с особыми ядовитыми железами. Ядовитые виды (Asthenosoma, Diadema) распространены в основном в тропических и субтропических районах Индийского, Тихого и Атлантического океанов.</p>
	<p>Кроме игл, на поверхности панциря морских ежей сидят педицеллярии, а также, у ротового отверстия, особые органы равновесия — сферидии. У некоторых видов педицеллярии также снабжены ядовитыми железами (Toxopneustes, Sphaerechinus).</p>
	<p>Амбулакральная система обычна для иглокожих. Каждая амбулакральная ножка, снабжённая присоской, проходит сквозь скелетные пластинки панциря двумя веточками (через 2 поры). Амбулакральные ножки нижней стороны служат морским ежам для передвижения и рытья нор. Ножки спинной стороны преобразовались в органы осязания и дыхания. У некоторых видов амбулакральные ножки наряду с иглами и педицелляриями принимают активное участие в процессе очищения панциря и питания.</p>
	<p>Рот у морских ежей расположен в центре нижней (оральной) стороны тела; анальное и половые отверстия — обычно в центре верхней (аборальной) стороны. У правильных морских ежей рот снабжён жевательным аппаратом (аристотелев фонарь), служащим для соскрёбывания водорослей с камней[2]. Аристотелев фонарь состоит из 5 сложных челюстей, каждая из которых оканчивается острым зубом. Зубы аристотелева фонаря участвуют не только в переработке пищи, но и в передвижении (вонзаясь в грунт), а также предположительно в рытье нор. У неправильных морских ежей, питающихся детритом, жевательного аппарата нет.</p>
	<p>Кишечник не имеет лучевого строения, а представляет трубку, идущую от ротового отверстия по спирали внутри полости тела. Иногда вдоль него идет придаточная кишка, открывающаяся в кишечник обоими концами. Органами дыхания служат наружные кожные жабры, расположенные около рта, амбулакральная система и придаточная кишка.</p>
	<p>Органы чувств и нервная система развиты довольно слабо. Помимо осязательных амбулакральных ножек и сферидиев, у ежей имеются примитивные глазки, расположенные на верхней стороне тела.</p>
	</div>
</body>
</html>

На изображении значение свойства break-before указано column, т.е. браузер осуществляет обязательный разрыв и переход к новой колонке перед элементом <p> с классом first:

Пример использования свойства break-before со значением column(осуществляет обязательный разрыв и переход к новой колонке перед элементом).
Пример использования свойства break-before со значением column(осуществляет обязательный разрыв и переход к новой колонке перед элементом).
CSS свойства