Что это значит overflow hidden
Изучаем overflow hidden CSS
Значения свойства overflow
visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не « заталкивать » содержимое внутрь блока элемента.
hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.
scroll: добавляет полосы прокрутки и скрывает содержимое, выходящее за пределы блока элемента. Его можно увидеть с помощью полос прокрутки.
auto: добавляет полосы прокрутки, если необходимо.
initial: устанавливает значение по умолчанию.
inherit: устанавливает значение, которое задано для родительского элемента.
Теперь осмотрим, как каждое из этих значений влияет на контент.
visible
overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.
hidden
Overflow: hidden CSS скрывает содержимое, выходящее за пределы контейнера.
scroll
Добавляет полосы прокрутки, даже если содержимое не выходит за пределы контейнера. Обратите внимание, что overflow: scroll добавляет горизонтальную и вертикальную полосы прокрутки.
В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.
Также можно управлять тем, как содержимое, выходящее за пределы контейнера, ведет себя в горизонтальном и вертикальном направлении. Для этого используются два других свойства, о которых речь пойдет ниже.
overflow-x и overflow-y
Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.
Давайте рассмотрим примеры.
Разбивка длинного текста
Поддержка браузерами
Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.
Дайте знать, что вы думаете по этой теме в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, отклики, подписки!
CSS свойство overflow
Свойство переполнения CSS overflow контролирует, что происходит с содержимым, выходящим за границы элемента. Например вы создали div, для которого явно установили ширину 200px, но внутри него поместили изображение шириной 300px. Это изображение будет выступать за пределы div и по умолчанию будет видимым. Если вы установите значение overflow как скрытое – hidden, изображение обрежется до 200 px.
Значения
Текстовый контент естественным образом переноситься на новые строки (если не используется white-space ), поэтому текст редко может быть причиной переполнения. Переполнение чаще возникает, когда заданы явные значения ширины и высоты блока.
Visible
Еще интересный момент в том, что даже если контент виден за пределами блока, это вылезающее содержимое не влияет на поток страницы. Например, под блоком с синей рамкой выведен блок с красной рамкой и прозрачным красным фоном. Видно, что текст за пределами первого контейнера не мешает второму контейнеру и тот примыкает вплотную к первому.
Говоря в целом: не стоит без особой причины устанавливать фиксированную высоту элементов.
Hidden
Это особенно полезно при использовании динамического содержимого и возможности переполнения, способной вызвать серьезные проблемы с версткой. Например, вы выводите заголовки последних записей в определенном месте, для которого определен фиксированный размер. В этом случае если на сайте возникнет статья с длинным заголовком, не помещающемся полностью в указанное место, то скрыв “лишнюю” ее часть, вы покажете часть заголовка и сохраните верстку.
Scroll
Установка значения переполнения в scroll скроет содержимое за пределами поля, но создаст полосы прокрутки для просмотра скрытого содержимого.
Следует отметить, что с этим значением вы получаете И горизонтальную И вертикальную полосы прокрутки независимо от того, что для содержимого требуется только одна или другая.
На примере ниже видно, с этим значением осталась только вертикальная полоса прокрутки.
overflow-x and overflow-y
При этом основное свойство можно использовать как составное и указывать значения сразу для оси X и Y таким образом:
Очистка Float
Проблема встречается в следующем: когда вы помещаете в элемент дочерний элемент с установленным свойством float (плавающий), то родительский элемент не растягивается, чтобы охватить дочерний элемент, а сворачивается, не учитывая его. Это бывает проблемой, например, когда у родительского элемента задан фон или рамка.
Элемент с установленным свойством переполнением (любое значение, кроме visible ) будет расширяться настолько, насколько необходимо, чтобы охватить все дочерние элементы внутри его, которые являются плавающими. Ниже тот же пример, но с установленным для родителя свойством overflow: auto :
Overlay
Свойства CSS overflow (hidden, visible, auto, scroll) и его разновидности для отображения контента блочных элементов
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня мы продолжаем тему каскадных таблиц стилей и в очередном уроке из «Учебника» рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.
На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.
Конечно, во многих случаях не обойтись без задания конкретных размеров области посредством width и height (ширины и высоты блока), которые могут принимать значения, выраженные в различных единицах измерения. В общем, рассмотрим ниже примеры действия свойства оверфлоу во всех возможных вариантах.
Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума W3C (данные представлены по версии CSS2.1, хотя они действительны и поддерживаются в более новой версии CSS3):
Как видите, оверфлоу имеет 4 основных параметра (visible, hidden, auto, scroll) и значение inherit, которое можно прописать при желании присвоить дочерним элементам свойство родителя, однако по умолчанию это правило не наследуется (inherited: no на скриншоте). Дефолтным же значением является висибл (initial: visible).
Прежде, чем приступить к исследованию посредством практических примеров, давайте уясним для себя некоторые детали. Как уже было сказано выше, правило оверфлоу позволяет управлять содержимым блочного элемента в тех случаях, когда оно не помещается в его пределах. Это напрямую следует из названия данного CSS правила (overflow в переводе с английского означает переполнение, избыток.)
Предварительно вы можете ознакомиться, в чем состоит отличие блочных и строчных тегов, перейдя по предоставленной ссылке. Кроме того, нелишним будет пробежать взглядом материал о свойстве display block, которое и придает элементам на странице блочные характеристки.
Возьмем для примера контейнер DIV (в этой статье подробнее о дивах как основе блочной верстки), подкрасим его с помощью background, подключив стили через атрибут style, и поместим внутрь произвольный текст:
Итоговый результат будет примерно таким:
У нас не определена ширина (width) контейнера. В этом случае, если вы помните, блочный элемент занимает все доступное ему место по ширине. А вот высота (height) блока, ежели она не указана, определяется именно содержанием (в нашем примере присутствующим там текстом).
Перейдя по этой ссылке, вы сможете понаблюдать, как поведет себя блок с содержащимся в нем контентом при изменении ширины окна просмотра. Для этого попробуйте с помощью левой кнопки мышки передвигать границу влево-вправо:
А теперь попробуем к CSS стилям для дива из нашего примера добавить фиксированную ширину, скажем, 250px:
В результате произойдут следующие изменения с нашим контейнером:
В общем, все получилось в соответствии со сказанным выше: при указании фиксированной ширины блочного элемента содержание (текст) будет автоматически растягивать высоту контейнера. Далее укажем определенную высоту испытуемого блока, допустим, 40px:
В этом случае в условиях ограниченного пространства тому же самому объему контента деваться некуда и он вылезет за границу DIV по высоте:
Действует правило по умолчанию overflow visible (хотя оно и не прописано), в соответствии с которым содержимое, вылезающее за границы контейнера, отображается в браузере. Если теперь к стилям CSS элемента добавить overflow:hidden, то часть текста, не умещающегося в блоке, будет скрыто:
Правило оверфлоу для блоков, содержащих контент, который невозможно распределить по высоте
Выше я предложил пример, когда блочный элемент содержит текст, который при ограничении ширины может перераспределяться (с помощью изменения переноса слов). Это сейчас особенно актуально при применении адаптивного дизайна для просмотра на мобильниках. Однако, бывает так, что содержимое по той или иной причине не обладает такой гибкостью.
Возьмем для начала те же условия, что и в примере, который мы разобрали выше. Как помните, при указании фиксированной ширины блока контент перераспределялся таким образом, что не превышал границы по горизонтали, но одновременно увеличивал высоту контейнера (вместе с содержимым) по вертикали. Теперь изменим содержание и стандартный текст заменим длинными словами без пробелов с указанием width:
Обратите внимание, что теперь содержимое при ограничении ширины сразу превысило границы по горизонтали. И если пропишем overflow hidden, то тем самым обрежем контент:
Добавление прокрутки с помощью параметров scroll и auto правила overflow
Теперь разберем тот случай, если ширина и высота контейнера фиксированные, но не умещающийся в нем контент желательно оставить доступным. Возьмем тот же пример c фиксированными шириной и высотой, только значение height для наглядности укажем в 60px, добавив overflow:scroll к CSS стилям:
В результате по вертикали и горизонтали появились полосы прокрутки (scrollbars):
Таким образом, контент становится доступным, пусть и с помощью скроллинга. Однако, обратите внимание, что сформировалась не только вертикальная прокрутка, которая нужна для полного просмотра, но и горизонтальная, которая не является активной. Это особенность именно значения scroll.
Если же вы хотите, чтобы прокрутка появлялась только в случае необходимости, то имеет смысл применить параметр overflow:auto, который инициирует создание полос прокрутки только в том случае, если они действительно нужны (подробности посмотрите на этой вебстранице):
Хочу отметить, что у основного правила стилей есть вариации в виде overflow-x и overflow-y, которые принимают те же значения (visible, hidden, scroll, auto), что и базовый оверфлоу, только заданные параметры применяются к содержимому блоков по горизонтали (x) и по вертикали (y).
Правило CSS text-overflow (clip, ellipsis)
А теперь познакомимся с модификацией выше описанного свойства оверфлоу, которое появилось только в CSS3. О нем можно получить информацию на соответствующей официальной странице (редакторский черновик консорциума W3C):
Свойство text-overflow имеет 2 основных значения (clip и ellipsis). Оно действует только в том случае, если указан overflow, значение которого отлично от visible. А это, как вы помните, параметр по умолчанию, поэтому в стилях для соответствующего элемента должен обязательно присутствовать оверфлоу с hidden, scroll или auto.
Clip является дефолтным значением и просто обрезает текст. Поэтому задействуем text-overflow для нашего DIV с соответствующими CSS свойствами, добавив white-space:nowrap (для запрета переноса слов):
Как видите, ellipsis позволяет добавить многоточие вместо обрезанного текста, намекая на его продолжение. Чтобы придать логическое завершение данному примеру, можно дописать псевдокласс :hover для дива, который изменяет стиль элемента при наведении на него курсора:
Теперь текст будет обрезан, но ежели вы наведете на него курсор мышки, то он будет появляться в полном объеме. Можете в этом убедиться, перейдя по предоставленной ссылке.
overflow
Резюме
Свойство CSS overflow определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.
Синтаксис
Значения
Расширения Mozilla
Примеры
visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| CSS Overflow Module Level 3 Определение ‘overflow’ в этой спецификации. | Рабочий черновик | |
| CSS Box Model Определение ‘overflow’ в этой спецификации. | Кандидат в рекомендации | Без изменений |
| CSS Level 2 (Revision 1) Определение ‘overflow’ в этой спецификации. | Рекомендация | Initial definition. |
Совместимость браузера
BCD tables only load in the browser
Firefox (Gecko) Примечания
Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group (
,, ). Это поведение будет исправлено в следующих версиях.Internet Explorer Примечания
CSS свойство overflow управляет тем, что происходит с содержимым, которое слишком велико, чтобы поместиться в области.
CSS Overflow
Свойство overflow указывает, следует ли обрезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области. Например, если текст не помещается в блочный элемент
Свойство overflow имеет следующие значения:
Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.
Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow: scroll»).
overflow: visible
По умолчанию, переполнение visible означает, что оно не обрезается и отображается вне поля элемента:
Пример
overflow: hidden
Пример
overflow: scroll
При установке значения scroll переполнение обрезается, и для прокрутки внутри поля добавляется полоса прокрутки. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):
Пример
overflow: auto
Пример
overflow-x и overflow-y
Свойства overflow-x и overflow-y указывают, следует ли изменять переполнение содержимого только по горизонтали или только по вертикали (или оба):
overflow-x указывает, что делать с левым/правым краем содержимого.
overflow-y указывает, что делать с верхним/нижним краем содержимого.