Когда тексту необходимо места больше чем имеет блок браузер отобразит полосу

Обновлено: 04.07.2024

Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть - вылезшим за границы).

Синтаксис

Значения

Значение	Описание
hidden	Скрывает то содержимое, которое вылезло за границы блока.
scroll	Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto	Добавляет полосы прокрутки при необходимости: если содержимое не помещается - они появятся, если все помещается - их не будет.
visible	Не скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible .

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

Пример . Значение visible

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

Пример . Значение hidden

Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте - и никакого обрезания не будет:

Пример . Значение scroll

При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):

Пример . Значение auto

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

Свойство overflow управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.

Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow .

visible (по умолчанию)
hidden
scroll
auto

visible

Если не ставить overflow явно или поставить visible , то содержимое отображается за границами блока.

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

hidden

Переполняющее содержимое не отображается.

Вылезающее за границу содержимое становится недоступно.

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

scroll

Полоса прокрутки отображается всегда.

То же самое, что auto , но полоса прокрутки видна всегда, даже если переполнения нет.

overflow-x, overflow-y

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y :

Итого

Свойства overflow-x/overflow-y (или оба одновременно: overflow ) задают поведение контейнера при переполнении:

visible По умолчанию, содержимое вылезает за границы блока. hidden Переполняющее содержимое невидимо. auto Полоса прокрутки при переполнении. scroll Полоса прокрутки всегда.

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float . Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow , то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

От автора: в CSS мы можем контролировать ситуацию, когда содержимое элемента слишком велико, чтобы уместиться в контейнер. Свойство для этого – overflow, это сокращение от свойств overflow-x и overflow-y. В этой статье я познакомлю вас с этими свойствами, а затем мы вместе рассмотрим некоторые концепции и варианты использования, связанные с переполнением.

Вступление

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

Это элемент уровня блока (например: div, section) с заданной высотой через height или max-height. Под заданной высотой я подразумеваю, что элемент должен иметь содержимое (не пустой), чтобы не указывать высоту явно.

Или элемент с установленным для white-space значением nowrap.

Возможные значения

Свойство overflow может принимать следующие возможные значения: visible, hidden, scroll, auto.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

visible

Значение по умолчанию, при котором содержимое может выходить за пределы родительского элемента. Это может быть установлено как:

Согласно Mozilla Developer Network MDN: Установка для одной оси visible (по умолчанию), а для другой – auto, приводит к тому, что visible ведет себя как auto.

Например, если мы установим для элемента следующее:

Значение свойства overflow будет вычислено, как auto auto.

hidden

Когда содержимое длиннее, чем его родитель, оно будет обрезано. Тем не менее, содержимое можно прокручивать с помощью Javascript.

scroll

Значение scroll позволяет добавлять прокрутку, чтобы показать обрезанное содержимое, и она может быть горизонтальной или вертикальной.

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

Я считаю это умным ключевым словом! Оно добавляет полосу прокрутки, только если содержимое длиннее контейнера.

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

Overflow-X

Это отвечает за ось X или горизонтальные стороны элемента.

Overflow-Y

Это отвечает за ось Y или вертикальные стороны элемента.

Примеры использования

Простой слайдер

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

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

Вывести карточки в одну строку. Я буду использовать для этого flexbox.

Добавить для контейнера overflow-x.

И это работает в настольных браузерах. Однако при тестировании этого в Safari для iOS (12.4.1) прокрутка не работала. После некоторых проб и ошибок прокрутка все же заработала, когда я добавил дочерним элементам ширину. Работает без проблем в iOS (13.3).

Модальный контент

Когда модальное содержимое слишком длинное, мы можем легко сделать область прокручиваемой. Для этого у нас должно быть следующее:

Максимальная высота для модала.

Тело модала должно занимать все доступное пространство.

/* 1. Задаем, чтобы тело модала занимала все доступное пространство */ /* 2. Добавляем полосу прокрутки, если содержимое слишком длинное. Я использовал auto, потому что не хочу, чтобы полоса прокрутки добавлялась, пока содержимое не является достаточно длинным. */

Карточка с закругленными углами

Когда у нас есть карточка, и мы хотим, чтобы ее углы были закруглены, мы часто добавляем border-radius для верхнего и нижнего углов, как показано ниже:

Для этого может потребоваться много работы, особенно если карточка имеет другой дизайн на мобильном телефоне. Например, вместо того, чтобы размещать дочерние элементы один над другим, они будут располагаться рядом друг с другом. Для этого случая полезно использовать для контейнера overflow: hidden, а затем добавить border-radius:

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

Усечение текста

Для длинного контента мы можем обрезать текст с помощью свойства text-overflow.

Для элемента, который мы хотим усечь, я добавил следующее:

Это все! Обратите внимание, чтобы это работало, важно использовать overflow: hidden.

Анимация

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

В CSS это будет выглядеть так:

У нас есть две кнопки, и у каждой есть псевдо-элемент, который переводится влево и вниз, соответственно.

Общие проблемы, связанные с переполнением

Прокрутка на мобильном устройстве

Например, когда у нас есть слайдер, недостаточно добавить overflow-x и тем ограничиться. В Chrome iOS нам нужно продолжать прокручивать и перемещать контент вручную. К счастью, есть свойство, которое может улучшить процесс прокрутки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Встроенные блочные элементы

Когда inline-block элемент имеет значение overflow, отличное от visible, это приведет к выравниванию нижнего края элемента на основе текстовой базовой линии его соседних элементов. Рассмотрим следующий пример.

Чтобы решить эту проблему, нам нужно изменить выравнивание кнопки, которая имеет overflow: hidden.

5 / 5

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

Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам ( display : block ; или те которые изначально являются блочными - div и так далее).

Возможные значения, которые принимает это свойство(по-умолчанию visible ):

Visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
Hidden - Отображается только область внутри элемента, остальное будет скрыто.
Scroll - Всегда добавляются полосы прокрутки.
Auto - Полосы прокрутки добавляются только при необходимости.
Inherit - Наследует значение родителя.

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

В демо вы сможете пронаблюдать, как действует каждое из значений свойства на деле:

Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto :

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

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow : visible ; специально размещен другой блок и закращен в другой цвет. Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow : visible ; и height : auto ; ). Исправляется это заменой значения visible на hidden , следует помнить, что это свойство стоит указывать только блокам с height : auto ; , если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow : visible ; и height : auto ; задано еще и какое-нибудь значение свойства float . Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

Читайте также: