overflow

CSS overflow Property

The overflow property specifies what should happen if content overflows an element’s box.

This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

Default value:	visible
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.overflow=»scroll» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though «overflow:scroll» is set).

CSS Syntax

Property Values

Value	Description	Demo
visible	The overflow is not clipped. It renders outside the element’s box. This is default	Demo ❯
hidden	The overflow is clipped, and the rest of the content will be invisible. Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo())	Demo ❯
clip	The overflow is clipped, and the rest of the content will be invisible. Forbids scrolling, including programmatic scrolling.	Demo ❯
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content	Demo ❯
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник

Переполнение содержимого

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

Необходимые условия:	Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (study Введение в CSS.)
Цель:	Понять, что такое переполнение и как с ним работать.

Что такое переполнение?

Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством width и height (или inline-size и block-size ). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.

CSS пытается избежать «потери данных»

Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.

Первый пример — это блок, который был ограничен установленным параметром height . Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.

Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.

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

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

Если вы ограничиваете поле с помощью параметров width или height , CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).

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

Свойство overflow

Свойство overflow позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – visible , что означает — «показывать контент, когда он выходит за границы блока».

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

Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании overflow: scroll браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.

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

В приведённом выше примере нам нужно прокручивать содержимое только по оси y , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство overflow-y (en-US), которое позволяет прокручивать содержимое только по оси y .

Вы также можете установить прокрутку по оси x с помощью overflow-x (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства word-break или overflow-wrap . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

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

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство overflow , передав два значения. Первое значение будет относиться к overflow-x , а второе — к overflow-y . Если передать одно значение, то overflow-x и overflow-y получат одинаковые значения. Например, overflow: scroll hidden устанавливает overflow-x в scroll и overflow-y в hidden .

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

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

Overflow устанавливает контекст форматирования блока

Когда вы используете значение overflow, такое как scroll или auto , вы создаете контекст форматирования блока (BFC). Содержимое блока, для которого вы установили параметр overflow приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.

Нежелательное переполнение в веб-разработке

Современные методы раскладки (описанные в разделе CSS раскладка) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.

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

При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).

Проверьте свои навыки!

В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. Проверь свои навыки: переполнение (en-US) .

Заключение

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

In this module

1. Каскад и наследование
2. Селекторы CSS
   • Селекторы типа, класса и ID
   • Селекторы атрибута
   • Псевдоклассы и псевдоэлементы
   • Комбинаторы
3. Блочная модель(The box model)
4. Фон и границы
5. Обработка разных направлений текста
6. Переполнение содержимого
7. Значения и единицы измерения
8. Размеры в CSS
9. Элементы изображений, форм и медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация вашей CSS

Found a content problem with this page?

This page was last modified on 30 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

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 заданные размеры должны включать в себя и полосы прокрутки.

Источник