Мы знаем какой интернет-магазин Вам нужен
Интернет-магазины для малого бизнеса, предпринимателей и самозанятых
Ваше имя:
Email:
Телефон:



или напишите в Telegram Whatsapp

Заметки: Наблюдения

Довольно редко используемое CSS свойство break-inside, но иногда его использование бывает весьма полезным.

Что же такое break-inside?

Это свойство определяет каким образом будет производится разрыв страницы элемента. Естественно, что разрыв страницы чаще всего нужен при печати. Но оказывается, что не только.

Представим пример, что для некоторого блока на странице задан вывод в две или три колонки. И в тексте используется изображение и подпись. Автоматически разрыв колонки может привести к тому, что картинка останется внизу первой колонки, а надпись уплывет в следующую колонку. Висячая такая подпись получится.

Избежать такого случая поможет значение avoid-column свойства break-inside для блока, содержащего изображение + надпись.

Возможные значения свойства break-inside:

  • auto - автоматический разрыв страницы или колоноки перед текущим элементом
  • avoid - отмена разрыва страницы внутри текущего элемента
  • avoid-page - отмена разрыва страницы внутри текущего элемента
  • avoid-column - отмена разрыва колонки внутри текущего элемента

Пример реалиазации, описанный выше:


<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Пример</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 90%;
        padding: 50px;
    }
    p{
        margin-bottom: 1em;
        line-height: 1.3em;
    }
    .twoColumn{
        column-count: 2;
        column-gap: 50px;
    }
    .imgBox{
        text-align: center;
        break-inside: avoid-column;
    }
    img{
        max-width: 100%;
    }
</style>
</head>

<body>
<div class="twoColumn">
    <p>Некий текст, который должен выводится в две колонки, далее идет блок с изображением.</p>
    <div class="imgBox">
        <img src="1.jpg">
        <p>Некая абстракция</p>
    </div>
    <p>Далее идет еще текст текст, который будет выводится уже во второй колонке.</p>
</div>
</body>
</html>


01.08.2022 17:02 Подробнее

Находясь на нашем сайте, вы принимаете условия использования файлов cookies. Более подробная информация здесь.