Организация переноса строк в CSS для inline-block элемента

Быстрый ответ

Для переноса элемента после inline используйте псевдоэлемент ::after, сочетая свойства content: "\\A" и white-space: pre;:

.break-after::after {
  content: "\\A";
  white-space: pre;
}

Перенос до элемента осуществляется заменой ::after на ::before. Класс .break-after нужно применять к обхектам, которые должны следовать после переноса.

Почему с inline-block всё не столь однозначно

С элементами inline-block ситуация несколько сложнее. Давайте поймём, в чём дело.

Разбираемся с принципами после рассмотрения простого решения

Специфика inline-block

Предложенный метод не подойдёт для inline-block, поскольку эти элементы имеют свои особенности и сохраняют поток документа.

Подробнее об этом расскажет наш спикер на видео

display: block как альтернативное решение

Я предлагаю такое решение – использовать свойство display: block:

.break-before-inline-block {
  display: block;
  content: '';
}

Когда все побуждения в тупик, вспомните классику: HTML-элемент <br>

Когда ни один из методов не помогает и у вас есть возможность редактировать HTML, вручную вставьте <br> до или после inline-block.

Эффективное применение псевдоэлементов

Чтобы разделить группы inline-block, примените clear: both к псевдоэлементам блочного типа.

.break-after-inline-block {
  clear: both;
  display: block;
}

Создание современного трёхколоночного макета

Если вам нужна реализация трёхколоночного макета без float и с фиксированными значениями ширины, при этом адаптивной, вот как это можно сделать:

Семантически верное использование <ul>

Для создания колонок используйте вложенные списки <ul> для семантической целостности:

<ul class="three-columns">
  <li><ul><li>Контент первой колонки</li></ul></li>
  <li><ul><li>Контент второй колонки</li></ul></li>
  <li><ul><li>Контент третьей колонки</li></ul></li>
</ul>

CSS-стили для гибкой настройки колонок

И вот соответствующий CSS для равномерно растянутых колонок:

.three-columns > li {
  display: inline-block;
  width: 33.33%;
}
.three-columns ul {
  width: 100%;
}

Таким образом, колонки будут равномерно занимать всю ширину экрана без использования float и фиксированных размеров.

Визуализация

Представьте взаимодействие inline-block как состав поезда:

Вагоны поезда: [🚃🚃🚋🚃🚃]

Мы переносим средний вагон (🚋) на новую строку:

До переноса: [🚃🚃🚋🚃🚃] 
После переноса: [🚃🚃] [🚋] [🚃🚃]

С помощью псевдоклассов мы можем сформировать это разделение:

.break-before {
  display: block;
  content: '';
}

.break-after {
  display: block;
  content: '';
}

Такой код позволит распределить элементы inline-block на странице. Использование float и clear при этом теряет актуальность. Современные подходы к макетированию, такие как flexbox и CSS grid, обеспечивают более стабильные и лёгкие в поддержке решения.

Будьте готовы к неожиданностям с этими "умными" CSS-уловками

Clearfix для устаревшего кода

Несмотря на то, что вы избегаете использование float, техника clearfix важна для предотвращения проблем с макетированием:

/* Float не вызывает страха */
.group::after {
  content: "";
  display: table;
  clear: both;
}

Flexbox – технология будущего

Для новых или обновляемых проектов flexbox будет отличной заменой:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
/* Flexbox: доступные и удобные макеты с 2009 года */

Полезные материалы

1. display – CSS: Каскадные таблицы стилей | MDN — Полное руководство по свойству display.
2. ::before / ::after | CSS-Tricks — Объяснение работы псевдоэлементов ::before и ::after в CSS.
3. CSS white-space property — Управление переносом текста в CSS с помощью white-space.
4. Generated content, automatic numbering, and lists — Описание создания содержимого для псевдоэлементов до/после, представленное W3C.
5. The Clearfix: Force an Element To Self-Clear its Children | CSS-Tricks — Техника clearfix, проверенная временем и оставающаяся эффективной.