CSS свойство break-inside
CSS свойства
Определение и применение
CSS свойство break-inside определяет как проиходят разрывы страниц (при печати), колонок или определённых областей перед указанным элементом.
Обращаю Ваше внимание, что данное свойство нельзя применять к пустым блочным элементам (например, к пустому <div> ), либо к элементам с абсолютным позиционированием (position: absolute;).
Планируется, что в будущем это свойство станет полноценной заменой свойства page-break-inside, как более универсальное и функциональное, но в настоящее время его применение не рекомендуется.
Поддержка браузерами
| Значение |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| auto, avoid | Нет | Нет | Нет | Нет | 10.0 | 12.0 |
| avoid-page, avoid-column | Нет | Нет | Нет | Нет | 10.0 | 12.0 |
CSS синтаксис:
break-inside:"auto | avoid | avoid-page | avoid-column | initial | inherit";
JavaScript синтаксис:
object.style.breakInside = "avoid"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Разрыв страниц внутри элемента (при печати), колонок или определённых областей происходит в автоматическом режиме (при необходимости). Это значение по умолчанию. |
| avoid | Запрещает разрыв страниц (при печати/ в колоннах) внутри элемента (если возможно). |
| avoid-page | Предотвращает разрыв страницы внутри текущего элемента. |
| avoid-column | Предотвращает разрыв колонки внутри текущего элемента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования свойства break-inside</title> <style> p { font-size: 15px; /* устанавливаем размер шрифта для абзацев */ break-inside: avoid; /* запрещает разрыв страниц внутри элемента (если возможно). */ } </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-inside указано по умолчанию (auto), т.е. браузер делает разрыв страницы внутри элемента <p> при необходимости:
На втором изображении значение свойства break-inside указано avoid, т.е. браузер запрещает (при печати / в колоннах) разрыв страниц внутри элемента <p> в данном случае (если возможно):
Рассмотрим еще применение этого свойства при работе с колоннами:
<!DOCTYPE html> <html> <head> <title>Пример использования свойства break-inside (работа с колоннами)</title> <style> p { font-size: 15px; /* устанавливаем размер шрифта для абзацев */ break-inside: avoid; /* запрещает разрыв страниц внутри элемента (если возможно). */ } .container { -webkit-column-count: 3; /* для поддержки ранних версий браузеров */ -moz-column-count: 3; /* для поддержки ранних версий браузеров */ column-count: 3; /* указываем количество колонок на которое необходимо разбить элемент */ } </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-inside указано avoid-column (при использовании avoid в браузере IE результат будет тот же), т.е. браузер запрещает в колоннах разрыв страниц внутри элемента <p> в данном случае (если возможно):
