overflow
Обрезать ли то, что не поместилось в блок? Или показывать скролл?
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block , inline — block , flex или grid ) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без).
Пример
Скопировать ссылку «Пример» Скопировано
Если содержимое блока будет больше, чем границы блока, оно будет «обрезано»:
.article /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden;>.article /* Задаём ограничения по размеру блока */ width: 300px; height: 300px; overflow: hidden; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector overflow: hidden;>.selector overflow: hidden; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Синтаксис свойства позволяет задать два значения — для оси x и оси y. Если указано одно значение, оно равнозначно применяется для обеих осей. Аналогичного результата можно добиться, используя самостоятельные CSS-свойства overflow — x и overflow — y .
Значения
Скопировать ссылку «Значения» Скопировано
- visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);
- hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;
- clip — новое значение, похожее по результату на hidden , но границы родительского блока рассчитываются с учётом внутренних отступов;
- scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;
- auto — если содержимое переполняет блок, контент будет доступен для прокрутки.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Чтобы контент внутри блока можно было скроллить, его содержимое должно явно превышать высоту родительского блока. Этого можно добиться или явно задав ему height , или ограничив высоту родительского блока.
💡 Задавая родительскому блоку фиксированную высоту, учитывайте, что, если не указан box — sizing : border — box , то это значение не учитывает внутренние отступы, заданные с помощью padding , что может спровоцировать появление нежелательной прокрутки.
На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
🛠 При вёрстке «классических» макетов необходимости в управлении полосой прокрутки практически нет. Чтобы избежать появления нежелательных полос прокрутки, минимизируйте явное задание высоты (кроме случаев, где это действительно необходимо).
Ещё один пример, когда будет полезно знание свойства overflow — обрезание текста с многоточием (в сочетании со свойством text — overflow : ellipsis или недокументированного -webkit — line — clamp ):
CSS свойство overflow
Свойство overflow управляет отображением контента, который выходит за границы блочного элемента.
Оно определяет, должен ли контент быть обрезан, чтобы поместиться в блоке, или должны ли быть добавлены полосы прокрутки к элементу. Это сокращенное свойство для:
Контент выходит за границы, если высота и ширина контейнера установлены.
Свойство overflow имеет следующие значения:
| Значение по умолчанию | visible |
| Применяется | К блочным контейнерам, флекс- и грид-контейнерам. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS2 |
| DOM синтаксис | Object.style.overflow = «auto»; |
Синтаксис
overflow: visible | hidden | scroll | auto | overlay | initial | inherit;Пример
html> html> head> style> p < background-color: #ccc; width: 300px; height: 200px; overflow: visible; > style> head> body> h2>Пример свойства overflow h2> h3>overflow: visible h3> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример со значением «scroll»:
Пример
html> html> head> style> p < background-color: #ccc; width: 300px; height: 200px; overflow: scroll; > style> head> body> h2>Пример свойства overflow h2> h3>overflow: scroll h3> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример со значением «hidden», где контент обрезается, чтобы поместиться в блоке:
Пример
html> html> head> style> p < background-color: #ccc; width: 300px; height: 200px; overflow: hidden; > style> head> body> h2>Пример свойства overflow h2> h3>overflow: hidden h3> p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. p> body> html>Пример со всеми значениями свойства:
Пример
html> html> head> title>Заголовок документа title> style> div.scroll < background-color: #eee; width: 300px; height: 200px; overflow: scroll; > div.hidden < background-color: #eee; width: 300px; height: 200px; overflow: hidden; > div.auto < background-color: #eee; width: 300px; height: 200px; overflow: auto; > div.visible < background-color: #eee; width: 300px; height: 200px; overflow: visible; > div.overlay < background-color: #eee; width: 300px; height: 200px; overflow: overlay; > style> head> body> h2>Пример свойства overflow h2> h3>overflow: scroll h3> div class="scroll">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> h3>overflow: hidden h3> div class="hidden">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> h3>overflow: auto h3> div class="auto">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> h3>overflow: visible h3> div class="visible">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> br/> br/> h3>overflow: overlay h3> div class="overlay">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. div> body> html>Значения
| Значение | Описание |
|---|---|
| visible | Отображается весь контент, даже если он выходит за границы блока. Значение по умолчанию. |
| hidden | Контент обрезается, чтобы поместиться в блоке. |
| scroll | Добавляется полоса прокрутки, чтобы увидеть вышедший за границы контент. |
| auto | Зависит от браузера. Если контент выходит за границы, добавляется полоса прокрутки. |
| overlay | Работает также, как и значение auto, но полоса прокрутки находится сверху от контента. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значения
visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow
Объектная модель
[window.]document.getElementById(» elementID «).style.overflowБраузеры
Internet Explorer до версии 7.0 включительно:
- не поддерживает значение inherit ;
- относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .
- Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
- Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
- Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.