Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

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

4 <a>Codepen</a>

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

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

7 <ol><li>overflow-x - управление переполнением по горизонтали.</li>

8 <li>overflow-y - управление переполнением по вертикали.</li>

9 <li>overflow - сокращенная запись двух предыдущих свойств. Если указать внутри только одно значение, то оно применится к двум осям одновременно. Наиболее распространенный вариант использования.</li>

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

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

12 <a>Codepen</a>

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

14 <ul><li>scroll</li>

15 <li>auto</li>

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

17 <a>Codepen</a>

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

19 <a>Codepen</a>

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

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

22 <h2>Переполнение текста</h2>

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

24 <a>Codepen</a>

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

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

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

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

29 <a>Codepen</a>

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

31 <a>Codepen</a>

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

33 <a>Codepen</a>

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

35 <ol><li>Отрисовываем блок .contact-body и ограничиваем его по ширине.</li>

36 <li>Отрисовываем блок .contact-name. Внутри него содержится длинный контент, который запрещено переносить согласно правилу white-space. Ширина блока больше, чем ширина родителя. По умолчанию отрисовываем контент за пределами контейнера.</li>

37 <li>Повторяем действия из пункта 2 для блока .contact-message.</li>

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

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

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

41 <ul><li>clip - значение по умолчанию. Текст "режется" в том месте, где достиг края блока. Именно это поведение можно заметить в примере выше.</li>

42 <li>ellipsis - вместо грубого среза строки добавляется многоточие. Это визуально показывает пользователю, что строка не закончена.</li>

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

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

45 <a>Codepen</a>