Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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


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


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

<section>
  <h1>Профессия «Верстальщик»</h1>
  <p>
    Создает страницы с помощью HTML и CSS. Умеет полностью пользоваться
    возможностями модулей Flex и Grid. Использует препроцессор SASS,
    шаблонизатор Pug и собирает проекты с помощью Gulp. Следит за доступностью
    сайта создавая семантически правильную разметку. Создает компоненты и
    утилиты на Bootstrap. Верстает адаптивные проекты.
  </p>
</section>
section {
  box-sizing: border-box;

  width: 500px;
  height: 300px;
  padding: 20px;

  color: #fff;
  font: 22px/1.5 sans-serif;

  background: #1d3e53;
}

h1 {
  font-size: 2em;
}

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

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

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

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

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

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

  • scroll
  • auto

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

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


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

body {
  overflow-x: hidden;
}

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


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

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

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

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


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


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

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

.contact-name {
  font-weight: 700;
  white-space: nowrap;
}

.contact-message {
  margin: 0;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
}

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

.contact-body {
  padding: 1.5rem;
  overflow-x: hidden;
}

.contact-name {
  overflow-x: hidden;

  font-weight: 700;
  white-space: nowrap;
}

.contact-message {
  margin: 0;
  overflow-x: hidden;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
}

Почему понадобилось столько свойств 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.


.contact-name {
  padding-right: 10px; /* добавим правый внутренний отступ для красоты */
  overflow-x: hidden;

  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.contact-message {
  margin: 0;
  overflow-x: hidden;

  color: #d6d6d6;
  font-size: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Самостоятельная работа

Используя новые свойства создайте блок с превью новостей. В нем будет три колонки шириной 500 пикселей. Блок содержит данные:

  • Дата
  • Название новости
  • Краткое описание

Дата и название новости должно выводиться полностью с возможным переносом строк. Краткое описание должно выводиться в одну строку. Если места не хватает, то в конце описания ставится многоточие.


Дополнительные материалы

  1. Спецификация модуля CSS Overflow Module Level 3

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 14 ноября
профессия
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 14 ноября
профессия
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 14 ноября
профессия
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 14 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 14 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 14 ноября
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
Старт 14 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»