CSS свойство break-before
CSS свойства
Определение и применение
CSS свойство break-before определяет как проиходят разрывы страниц (при печати), колонок или определённых областей перед указанным элементом.
Обращаю Ваше внимание, что данное свойство нельзя применять к пустым блочным элементам (например, к пустому <div> ), либо к элементам с абсолютным позиционированием (position: absolute;).
Планируется, что в будущем это свойство станет полноценной заменой свойства page-break-before, как более универсальное и функциональное, но в настоящее время его применение не рекомендуется.
Поддержка браузерами
| Значение |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| auto, always | Нет | Нет | Нет* | Нет | 10.0 | 12.0 |
| avoid | Нет | Нет | Нет | Нет | Нет | Нет |
| left, right | Нет | Нет | Нет | Нет | 10.0 | 12.0 |
| page, column | Нет | Нет | Нет | Нет | 10.0 | 12.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>
Рассмотрим еще применение этого свойства при работе с колоннами:
<!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:
