Верстка контента
2026-02-26 15:00 Diff
https://ru.hexlet.io/courses/css-content/lessons/overflow/theory_unit

Переполнение контента внутри блока — распространенное явление при верстке контента. Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Распространенный случай такого поведения — использование контейнера с фиксированными значениями высоты и ширины.

Интересно: использование фиксированных значений высоты и ширины в большинстве случаев не является хорошей практикой. Так можно достаточно быстро сверстать блок по макету, но одновременно с этим отнимается возможность расширения функционала. Любой отход от изначального контента может привести к проблемам, связанным с выходом контента из контейнера. Используйте фиксированные значения высоты и ширины там, где это предполагается в дизайне или для создания специфичной функциональности.

В качестве примера создадим блок с фиксированными значениями высоты и ширины. Внутри такого контейнера расположим текст так, чтобы он вышел за границы блока.

Codepen

Большая часть описания профессии вышла за пределы блока. Браузеры в данном случае считают контент важнее, чем контейнер, в котором он лежит, и не скрывают текст. Это не лишено смысла, ведь главная часть любой страницы — ее контент. Без него вся страница не будет иметь никакого смысла.

Такая ситуация называется переполнением, и CSS позволяет управлять им. Для этого существует три свойства:

  1. overflow-x — управление переполнением по горизонтали.
  2. overflow-y — управление переполнением по вертикали.
  3. overflow — сокращенная запись двух предыдущих свойств. Если указать внутри только одно значение, то оно применится к двум осям одновременно. Наиболее распространенный вариант использования.

По умолчанию свойство имеет значение visible, которое и указывает на то, что при переполнении контент должен отрисовываться вне своего родителя. В противовес visible есть значение hidden. Его задача обратна — скрыть контент, который выходит за пределы своего родителя. При этом доступ к такому контенту теряется. При использовании свойства overflow важно помнить, что это свойство не является наследуемым, поэтому его необходимо указывать у каждого блока, с которым происходит переполнение. В дальнейшем вы увидите примеры таких реализаций.

Распространенная ситуация при верстке блоков, которые должны находиться в HTML, но при этом быть временно скрытыми. Например, при создании слайдеров, в которых все неактивные слайды находятся за пределами блока и скрыты с помощью свойства overflow.

Codepen

Хоть теперь верстка не «сломалась» от переполнения, но прочитать описание профессии невозможно. Не хватает какой-нибудь полосы прокрутки внутри блока. Свойство overflow позволяет добавить полосу прокрутки в такой блок. Для этого может использоваться два значения:

  • scroll
  • auto

В чем разница между ними? Посмотрим на примере, взяв вначале значение scroll. Установим для секции новое значение свойства overflow.

Codepen

Теперь мы можем прокрутить контент внутри блока и наконец прочитать описание всей профессии. Но прокрутка появилась не только по вертикали, но и по горизонтали. При этом она недоступна, так как в этом направлении нет переполнения контента. Во-первых, это «портит» дизайн, а во-вторых отнимает место внутри блока. Если такое поведение явно не обозначено в макете, то стоит добавить полосу прокрутки только для того направления, где возникает переполнение контента. Это возможно с помощью значения auto. В этом случае браузер следит за тем, где возникло переполнение и добавляет полосу прокрутки именно для этого направления.

Codepen

Важно: используйте свойство overflow с осторожностью. Велик соблазн использовать его в случае быстрой верстки, когда при выходе макета за пределы экрана выставляют следующий CSS код:

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

Переполнение текста

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

Codepen

Перед продолжением изучите верстку этого примера. Вы можете обнаружить пару новых свойств, которые относятся к модулю CSS Flexible Box Layout. С этим модулем вы познакомитесь в курсе CSS: Flex.

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

Интересно: одна из задач хорошего специалиста — предусмотреть различные варианты контента внутри блока. Попробуйте в полях, где ожидается имя, выставлять длинные последовательности. Среди дизайнеров хорошей практикой является тестирование макета на «Константине Константинопольском»

Увеличим количество контента внутри компонента с превью сообщения.

Codepen

Не очень похоже на превью. Теперь это полноценное сообщение, которое отображается пользователю. Если таких сообщений будет десяток или сотня, то очень легко плюнуть на все и уйти с сайта, чем листать такое количество контента. В идеальной ситуации стоит отобразить только по одной строчке от имени и сообщения. Это можно сделать с помощью свойства white-space со значением nowrap. Такая конструкция запретит перенос текста по строкам внутри блока. Если ее добавить, то весь текст внутри блока с именем и блок с сообщением расположится в одну строку, что приведет к переполнению, но решит задачу. Ведь мы уже умеем работать с переполнением. Установим это свойство для селекторов .contact-name и .contact-message.

Codepen

Не очень красиво получилось. Стоит обрезать контент, который не помещается в рамки контейнера. Добавим свойство overflow-x для селекторов, к которым было добавлено правило white-space. Помимо этого, свойство необходимо добавить для всего контейнера, внутри которого и содержатся элементы с именем и сообщением

Codepen

Почему понадобилось столько свойств overflow? Дело в отображении HTML. По своей сути браузер просто считывает верстку сверху вниз. Если взглянуть на этот компонент с точки зрения браузера, то получится следующая ситуация:

  1. Отрисовываем блок .contact-body и ограничиваем его по ширине.
  2. Отрисовываем блок .contact-name. Внутри него содержится длинный контент, который запрещено переносить согласно правилу white-space. Ширина блока больше, чем ширина родителя. По умолчанию отрисовываем контент за пределами контейнера.
  3. Повторяем действия из пункта 2 для блока .contact-message.

Добавляя в каждый из трех блоков свойство overflow браузер последовательно работает с переполнением контента. Если упустить свойство у блока .contact-body, то ширина блоков .contact-name и .contact-message не будет ограничена и использование overflow никак на них не повлияет.

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

Для указания браузеру, что нужно делать при переполнении контента внутри строки используется правило text-overflow. Оно может принимать всего два значения:

  • clip — значение по умолчанию. Текст «режется» в том месте, где достиг края блока. Именно это поведение можно заметить в примере выше.
  • ellipsis — вместо грубого среза строки добавляется многоточие. Это визуально показывает пользователю, что строка не закончена.

Добавим многоточие в блоки с именем пользователя и текстом сообщения.

Важно: для работы свойства text-overflow необходимо наличие свойства overflow со значением, отличным от visible.

Codepen