overflow-y в CSS


Содержание

Height, w > 31 июля 2020

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы поговорим о том, как можно задавать размеры для области контента с помощью height и width и как настроить отображение этого контента в случае, если его будет больше, нежели сможет поместиться в отведенное для него место (css правило overflow со значениями hidden, scroll, auto).

В предпоследней статье справочника мы рассмотрели с вами несколько основополагающих правил, которые используются в блочной верстке: margin (взаимодействие с границами соседних элементов), border (рамка) и padding (расстояние от рамки до области с контентом). В той статье мы не рассмотрели только то, какими правилами описывается содержимое, что сейчас и попробуем исправить.

Height и w >

Для этого в языке стилевой разметки CSS предусмотрены правила описывающие ширину (width) и высоту (height) этой самой области. Ширина будет определяться размером контейнера, т.е. того пространства, в котором стоят Html элементы. Как только мы ее изменяем, то содержимое подстраивается под эту ширину. А вот ее высота зависит от его содержания.

Т.е., добавив немного содержимого, вы тем самым увеличите высоту контейнера с ним, а если уменьшите размер контента, то, соответственно, уменьшится высота. Ширина же области с содержимым будет целиком и полностью зависеть от широты контейнера, в котором контент заключен. Отсюда делаем вывод, что ширина содержимого является внешним фактором, а вот его высота — внутренним.

Правила, которые регулируют данные размеры, называются width и height. Напомню, что они не обрезают изображение физически, поэтому предварительно нужно будет уменьшить размер фотографий (сжать их) и уже только потом загружать на сайт. У этих правил по умолчанию используется значение Auto (самостоятельный расчет — отдается на усмотрение браузера).

Т.о. абсолютно для всех тэгов, если значения width и height не заданы в явном виде, они будут рассчитываться браузером автоматически, начиная с самого внешнего элемента.

Ну, а кроме Auto значениями для них могут служить величины в размерах используемых в CSS или же проценты (про особенности использования процентов читайте чуть ниже):

Самым внешним элементом является тег Html, для которого допустимая ширина контента равна области просмотра (размеру видимой части экрана). Дальше браузер будет рассчитывать width для тэга body и так далее, вплоть до нужного нам элемента. В итоге получается, что ширина элемента будет подстраиваться под доступную ему (не занятую другими элементами) область и занимать ее целиком.

По этой самой причине все блочные элементы (читайте про них подробнее в статье про CSS правило display block), для которых не задано в явном виде значение width, будут стараться занять все доступное им место по ширине, а при изменении области просмотра (например, уменьшения окна браузера) горизонтальные размеры блочных элементов тоже будет изменяться соответствующим образом.

Кстати говоря, имеет смысл задавать height и width только для блочных тегов, ибо для строк их задание никакого смысла не имеет и браузером этот код отрабатываться не будет.

Но в то же время, если мы жестко зададим width для блочного элемента (например, абзаца заключенного в контейнер DIV), а широту внешнего контейнера не будем явно указывать (браузер тогда будет для него использовать умолчательное значение Auto), то при уменьшении области просмотра (окна обозревателя) может получиться так, что абзац вылезет за размеры контейнера Div, в котором он был заключен:

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

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

Overflow — скрытие (h >

Давайте для наглядности рассмотрим два абзаца идущих друг за другом в Html коде. Для наглядности подсветим области, отведенные под низ, разным цветом с помощью background:

Т.к. width и height для этих параграфов не заданы, то по умолчанию браузер сам рассчитывает их исходя из своего собственного понимания значения Auto. В результате абзацы занимают по ширине все доступное им место, а по высоте соответствуют высоте заключенного в них контента.

Давайте теперь внесем первое изменение и зададим жестко широту первого абзаца (width:50px):

В общем-то произошло ожидаемое — размер по горизонтали уменьшился до заданной в width:50px величины, ну, а высота параграфа по-прежнему формируется благодаря height:auto (умолчательному значению). В результате она стала такой, чтобы вместить в себя весь текст.

Но давайте теперь ограничим и высоту контейнера с помощью height:15px.

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

Overflow означает «сверхпоток» или, другими словами, «переполнение контента». Оно говорит о том, что должно произойти с содержимым, если он не уместился в пределы той области (контейнера), которая ему была отведена.

У Overflow имеется несколько допустимых значений, но по умолчанию используется visible (показывать):

Именно поэтому в нашем последнем примере текст верхнего абзаца наехал на нижний (по умолчанию использовалось overflow:visible — показывать содержимое не уместившийся в контейнер). Мы могли бы использовать другую крайность — overflow:hidden. Тогда бы все, что не поместилось внутри контейнера, не показывалось бы на вебстранице:

Другие два значения этого CSS свойства позволяют скролить не уместившееся в контейнер содержимое (что-то похожее мы уже наблюдали, когда изучали атрибуты Html тега Frame). Итак, scroll отобразит полосы прокрутки по вертикали и горизонтали даже в том случае, если содержание благополучно умещается в отведенном для него контейнере:

Но гораздо более логичным будет использование значения Auto для Overflow, если вам необходимо сделать полосы прокрутки. В этом случае браузер сам будет рассчитывать, когда нужно их отображать и по каким именно осям.

Например, в случае использования overflow:auto мы получим возможность прокрутки только по той оси, где содержимое не умещается в границах контейнера:

Резюмируя можно сказать, что Overflow позволяет довольно гибко настроить варианты показа контента в том случае, когда он вылазит за пределы своего контейнера. У вас будет возможность выехавший контент показывать (visible), не показывать (обрезать — hidden), либо делать обязательную прокрутку (scroll) или же прокрутку по необходимости (auto).

Есть еще варианты написания этого правила относящиеся к CSS3, но которые поддерживаются всеми браузерами, а значит их можно будет смело использовать. Я говорю про варианты overflow-x и overflow-y, которые позволяют задавать или не задавать прокрутку по отдельным осям (x — горизонтальная, y — вертикальная).

Если вам, например, нужно сделать так, чтобы по горизонтали прокрутка не появлялась никогда, а по вертикали появлялась бы только по необходимости (если контент не умещается), то для Html элемента нужно будет прописать overflow-x:hidden и overflow-y:auto. Все, задача будет решена, ибо данный финт ушами поддерживается всеми браузерами.

Height и w >

Теперь давайте поговорим о том, от чего считается ширина заданная в процентах. Помните, в начале статьи я обещал на этом еще заострить наше внимание. Ну, собственно, CSS правило width здесь не является исключением и точно так же, как и padding и margin, считается в процентах от горизонтального размера контейнера с контентом.

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

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

Илон Маск рекомендует:  Что такое код trigger_error

Для того, чтобы отделить документы новые (которые учитывали все появившиеся стандарты) и старые (не учитывающие зачастую ничего, кроме чистого Html), компанией Мелкософт было предложено использовать небольшую фишечку из только что появившегося тогда языка XML. Фишечка эта была служебной и называется сейчас декларация doctype.

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

Таким образом браузер получил маркер того, по каким стандартам ему разбирать документ. Если декларация doctype проставлена, тогда он переходит в режим соответствия стандартам (standarts mode). Если же в коде документа на его первой строчке doctype обозреватель не обнаружит (или она будет написана не правильно, что идентично ее отсутствию), то тогда он переходит в так называемый режим уловок (quirks mode).

Документ, в котором отсутствует doctype, в браузере будет отображаться таким образом, как будто бы он очень старый (старинный). Если в этот же документ добавить декларацию, то обозреватель уже сбросит свой налет старины и начнет работать с кодом документа по всем принятым сейчас стандартам.

Вот только понятие старины очень разное. Какая, например, старина может быть у популярного сейчас обозревателя Google Chrome, который появился-то только в 2008 году? У IE, естественно, история есть и довольно богатая. Поэтому все браузеры любой версии будут отображать документ без декларации (в режиме quirks mode или уловок) точно так же, как это бы делал старинный IE 5.5, ибо именно эта версия считается базовой.

Почему я так долго говорил про режимы отображения браузеров? А потому, что для этих двух режимов задание высоты (height) области контента в процентах очень сильно отличается по отношению к расчету этой самой высоты.

Задание высоты (в процентах) области с контентом в режиме следования стандартов (standarts mode — когда прописан правильный doctype в начале документа) будет вообще не возможно, если не будет где-либо задана высота для контейнера, в который заключено это содержимое (заданная вами в процентах высота будет игнорироваться).

Если декларацию doctype из кода документа убрать, то мы увидим следующую картину:

Для режима следования стандартам (в начале документа прописана декларация) необходимо предварительно задать высоту контейнера (в нашем случае для Div контейнером будет служить тег Body) и только тогда браузер правильно отработает height:100%:

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

Если вы зададите для какого-либо Html элемента height и width для области контента, а также укажите для этого тега внутренние отступы (padding) и ширину рамки (border), то в режиме уловок (quirks mode — без прописанной декларации) в разных браузерах это все может быть истолковано по-разному.

В старом браузере IE 5.5 внутренние отступы и ширина рамки будут отсчитывать внутрь от заданных через height и width размеров. Т.е. общий размер элемента будет соответствовать тому, что задано в этих CSS свойствах (это устаревшая схема, которая сейчас не используется).

В остальных же современных браузерах отступы padding и ширина рамки border будут прибавляться к тем размерам, что были заданы в height и width. Т.е. в этом случае (режим уловок без doctype) изначально заданные размеры области контента будут расширены на величину внутренних отступов и рамки.

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

overflow

На этой странице

Резюме

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

Использование свойства overflow со значениями, отличными от visible , (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden , элемент, возможно, придется прокрутить.

Начальное значение visible
Применяется к Block-containers, flex containers, and grid containers
Наследуется нет
Отображение визуальный
Обработка значения как указано
Animation type discrete
Канонический порядок уникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Значения

Расширения 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.

Спецификации

Changed syntax to allow one or two keywords instead of only one

CSS overflow-y Property

Example

Show different overflow-y property values:

div.ex2 <
overflow-y: hidden;
>

div.ex3 <
overflow-y: auto;
>

div.ex4 <
overflow-y: visible;
>

Definition and Usage

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Tip: Use the overflow-x property to determine clipping at the left and right edges.

Спецификация Статус Комментарий
CSS Overflow Module Level 3
Определение ‘overflow’ в этой спецификации.
Рабочий черновик
Default value: visible
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.overflowY=»scroll» Try it

Browser Support

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

Numbers followed by -ms-, specify the first version that worked with a prefix.


Свойства CSS overflow (h > Игорь • Обновление:Декабрь 5, 2015 • Оставить комментарий

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодня мы продолжаем тему каскадных таблиц стилей и в очередном уроке из «Учебника» рассмотрим, как с помощью правила CSS overflow (используя его значения hidden, visible, scroll и auto) можно управлять контентом, если он не умещается в пределах отведенной ему области.

На практике (при верстке либо при редактировании) такие ситуации встречаются нередко, поэтому это будет полезно многим. Тем более, что попутно мы затронем вариации данного свойства overflow-x и overflow-y, которые являются частным случаем и обладают своими особенностями. А также коснемся смежного правила text-overflow, определяющее режим видимости текста в блоке, который выходит за границы элемента.

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

Overflow (visible, h >

Сначала, следуя традиции, посмотрим, какие значения действуют в таблице спецификации Международного консорциума 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 для дива, который изменяет стиль элемента при наведении на него курсора:

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

CSS overflow-y

The CSS overflow-y property was introduced in CSS3 for the purposes of setting the clipping behavior for the top and bottom edges of an element. It determines what to do when a box’s contents are too big (vertically) to fit inside.

The overflow-y property allows you to specify how the contents should be displayed in the event that it is too large for its outer container. In other words, the contents «overflow» on the «y» axis (i.e. the vertical axis). For example, you can specify that the outer container grows vertical scroll bars whenever the contents are too large to fit inside. Or you could specify that the contents should simply be hidden.

The overflow-y property is used for the vertical axis (i.e. the top and bottom edges). To determine overflow behavior for the horizontal axis (i.e. the left and right edges), use the overflow-x property.

Use the overflow shorthand property to set the overflow behavior for both the horizontal and vertical axes at once.

Syntax

Three additional keywords have also been proposed: no-content , no-display , and clip , however, see the note below for information on these values.

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

New Values

The CSS basic box model adds two keywords to the overflow properties:

no-display When the content doesn’t fit in the content box, the whole box is removed, as if display: none were specified. no-content When the content doesn’t fit in the content box, the whole content is hidden, as if visibility: hidden were specified.

The CSS Overflow Module Level 3 adds only one keyword, defined as follows:

clip Like hidden , this value indicates that the box’s content is clipped to its padding box and that no scrolling user interface should be provided by the UA to view the content outside the clipping region. In addition, unlike overflow-y: hidden which still allows programmatic scrolling, overflow-y: clip forbids scrolling entirely, through any mechanism, and therefore the box is not a scroll container.

However these two specifications are still in draft status and these values are experimental so avoid using them until they become more stable and gain better browser support.

Basic Property Information

The exact wording depends on the spec:

  • CSS2: Block containers.
  • CSS basic box model: Non-replaced block-level elements and non-replaced ‘inline-block’ elements.
  • CSS Overflow Module Level 3: Block containers, flex containers, and grid containers.

Inherited? No Media Visual

Overflow-y в CSS

Каждый элемент на странице является прямоугольником. Размеры, позиционирование и поведение может регулироваться через CSS. Под поведением я подразумеваю как элемент обрабатывает события когда изменяется контент снаружи и внутри. Например, если вы не установили элементу высоту, то она будет увеличиваться пока в элементе не поместится весь контент. Но что случится когда вы все-таки установили высоту или ширину для элемента, а содержимое не поместилось? Здесь нам понадобится CSS-свойство overflow, которое позволяет вам указать как поступать в таких случаях. Всего существует четыре значения для этого свойства: visible (по умолчанию), hidden, scroll и auto. Также есть родственные свойства overflow-y и overflow-x, которые используются гораздо реже. Давайте рассмотрим поведение элементов с фиксированными размерами для каждого значения overflow и обсудим общие случаи использования.

Visible

Если вы не укажете свойство overflow, то по умолчанию оно будет равно visible. Итак, в основном, нет смысла явно устанавливать свойство в visible, до тех пор пока оно не будет перегружено его где-нибудь в другом месте, а вам потребуется поведение по умолчанию.

Здесь важно помнить, что даже если снаружи элемента есть видимый контент, этот контент не сместится на странице. Например:

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

Hidden

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

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

Scroll

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

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

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

Отмена свойства float

Один из самых распространённых случаев использования свойства overflow, как это ни странно, отмена свойства float. Установка свойства overflow не отменяет свойство float у элемента. Смысл такой, что элемент с установленным свойством overflow в значение auto или hidden, будет изменять размеры до тех пор, пока не вместит в себя все дочерние элементы, которым установлено свойство float, подразумевается что высота не установлена. Рассмотрим пример:

Обсуждение свойства float займёт отдельную статью, которой я возможно займусь в скором времени.

Кросс-браузерность.

Как и у большинства свойств CSS, у свойства overflow есть свои особенности обработки в разных браузерах.

Скроллбары должны быть внутри или снаружи элемента?

Firefox располагает их снаружи, IE — внутри. Я считаю, что только IE располагает их правильно (они должны быть внутри).

Ошибка расширения элемента в IE 8.

В новой версии IE появились новые ошибки, в том числе и такие серъёзные, из-за которых пропадает всё содержимое страницы. Подробности.

Плавающий макет.

IE версий 6, 7 и 8 игнорируют значение по умолчанию visible для фиксированных размеров и расширяет элемент, чтобы подогнать контент. Это особенно важно для сайтов с плавающим макетом. В некоторых случаях одна колонка может вытеснить другую, и в итоге ломается вся разметка.


Ещё про IE

IE отображает вертикальный скроллбар независимо от того, нужен он или нет. В некоторых случаях это может быть и полезно, но не всегда. Чтобы избавиться от этого, необходимо установить overflow: auto для элемента body.

Полосы прокрутки: CSS свойство overflow, тонкости.

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

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

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

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

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

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

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

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

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

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

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

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

Как обрезать элемент на CSS (свойства overflow, text-overflow и clip)

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

CSS свойство overflow

Для предотвращения переполнения у блочных элементов применяется свойство overflow (overflow-x управляет горизонтальной прокруткой, overflow-y — вертикальной). Оно бесполезно для таких HTML элементов как textarea и input.

overflow и position: absolute;

Элемент с position: absolute; перемещается в рамках другого элемента с position, отличного от static. То есть родитель с overflow: h > ▼ hidden r a r s a r s f

Полоса прокрутки (scrollbar) и position: fixed;

Полоса прокрутки, принадлежащая тегу html, не перекрывается элементом с position: fixed. Это является проблемой для модального окна, распахнутом на весь экран. Решение просто как две копейки: нужно убрать прокрутку у html и добавить при необходимости прокрутку у body.

CSS свойство text-overflow: закончить многоточием

При overflow не в значении visible текст становится не читаемым, обрезаясь на полуслове. Особенно, если его перенос на другую строку запрещён благодаря white-space в значении nowrap. В этом случае можно обозначить, что часть слов убрана и повествование не закончено, воспользовавшись свойством text-overflow.

CSS свойство clip

Только для элементов, которым задан position: absolute;. Единицы измерения можно выбрать px, em и т.п., но не проценты.

6 комментариев:

ololo Отлично! таких примеров нигде еще не встречал. не нужно в блокнот для каждого свойства лесть! NMitra Я к этому варианту пришла через тернистый путь проб и ошибок. Сама без «Шпаргалки» уже не могу — это мой блокнот. ))) Правда всё ещё она не в том состоянии, в котором я её вижу в конечном итоге. Дмитрий Емцов А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй. NMitra Пока это невозможно. Что-то подобное я видела в «черновиках», но на практике нет поддержки браузерами. Евгений Гринец А подскажите пожалуйста, как сделать так, чтобы мое длинное название обрезалось только после второй строки? То есть не переносилось на третью строку, а обрезалось после конца второй.

some_class:
| First line,
| second line
| and more

.soome_class <
font-size: 1em;
height: 2em;
overflow: hidden;
>
NMitra Установите height, равную высоте двух строк. height двух строк = line-height * 2

overflow-y

Свойство CSS overflow-y указывает, каким образом отображать содержимое элемента, если оно превышает его размер по вертикали. Дело в том, что в таких ситуациях браузеры показывают не вместившееся содержимое прямо поверх элемента и его окружения с верхней или нижней стороны, но с помощью overflow-y можно сделать так, чтобы у элемента появилась вертикальная полоса прокрутки (скроллинг) или «лишнее» было просто обрезано.

На следующем изображении показано два блочных элемента — родительский (с разными значениями overflow-y ) и дочерний.

Пример с разными значениями overflow-y.

Для изменения отображения по горизонтали используется свойство overflow-x, сразу в обоих направлениях — overflow.

Тип свойства

Применяется: к незамещаемым блочным элементам (

и т.д.) и незамещаемым элементам с display равным inline-block.

Значения

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

  • auto — браузер добавляет полосу прокрутки, но только когда это необходимо.
  • visible — не вместившееся содержимое отображается за границами элемента.
  • hidden — все, что не вместится в размеры элемента, будет просто обрезано (скрыто).
  • scroll — полоса прокрутки добавляется всегда, независимо от количества содержимого элемента.

Процентная запись: не существует.

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

Обратите внимание, что если overflow-y не равен visible , то браузеры по умолчанию устанавливают такое же значение и для overflow-x. Причем отображение по горизонтали потом можно переопределить, но нельзя установить обратно в visible .

Синтаксис

Пример CSS: использование overflow-y

Результат. Использование свойства CSS overflow-y.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Нет Нет Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 7.0 и выше 2.0 и выше 2.0 и выше 9.2 9.6 и выше 3.1 и выше
Поддержка: Частично Да Да Да Нет Да Да
  1. Если свойство overflow-y не указано или равно visible , то он увеличивает высоту элемента, чтобы вместить содержимое.
  2. Если у явно указано overflow-y: visible , то окно браузера фиксируется и не скролится при любой высоте страницы, а также игнорируются любые значения overflow-y для тега .

СSS Переполнение

CSS Переполнение

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

Свойство overflow имеет следующие значения:

  • visible видимый — По умолчанию. Переполнение не обрезается. Оно отображается за элементом блока
  • hidden скрытый — Переполнение обрезается и остальной контент не будет видим
  • scroll прокручиваемый — Переполнение обрезается и добавляются полоса прокрутки, чтобы увидеть остальное содержимое
  • auto автоматический — Если переполнение обрезается, полоса прокрутки должна быть добавлены, чтобы увидеть остальное содержимое

Примечание: Свойство overflow работает только для блочных элементов с заданной высотой.

Примечание: В OS X Lion (в Mac), полосы прокрутки по умолчанию скрыты и показываются только, когда используется overflow:scroll .

Переполнение видимое

Значение visible по умолчанию, означает, что переполнение не обрезается и просматривается за пределами элемента:

Пример

Переполнение скрытое

Значение hidden обрезает переполнение и скрывает остальное содержимое:

Пример

Переполнение с прокруткой

Установка значения scroll обрезается переполнение и добавляется полоса прокрутки для прокрутки внутри блока. Обратите внимание, что можно добавить полосы прокрутки по горизонтали и вертикали (даже если Вам это не надо):

Пример

Переполнение автоматическое

Значение auto аналогично scroll , только добавляет полосы прокрутки, когда Вам это необходимо:

Пример

Переполнение по горизонтали и вертикали

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

Свойство overflow-x указывает, что делать с левый/правый краями содержания.
Свойство overflow-y указывает, что делать с верхним/нижним краями содержания.

Илон Маск рекомендует:  Что такое код swf_actiongeturl
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL