Overflow что это: overflow — CSS — Дока

Leave a Comment / Разное / By /

overflow-y | CSS | WebReference

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

Краткая информация

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис

overflow-y: auto | hidden | scroll | visible
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной высоты.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется вертикальная полоса прокрутки.
auto
Вертикальная полоса прокрутки добавляется только при необходимости.

Песочница

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

auto hidden scroll visible

div {
  height: 50px;
  overflow-y: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow-y</title> <style> body { overflow-y: hidden; /* Убираем вертикальную полосу прокрутки */ } .layer { width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
</p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-y

Объектная модель

Объект.style.overflowY

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

СпецификацияСтатус
CSS Basic Box ModelРабочий проект
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.53
3.5
11103
Браузеры

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

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

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

Форматирование

См.

также
  • overflow
  • overflow-x
  • Отслеживание прокрутки

overflow hidden CSS — руководство для начинающих

0 ∞

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

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

  • Значения свойства overflow
  • visible
  • hidden
  • scroll
  • auto
  • overflow-x и overflow-y
  • Разбивка длинного текста
  • Поддержка браузерами

visible: значение по умолчанию. Оно задает отображение содержимого вне блока элемента и позволяет не «заталкивать» содержимое внутрь блока элемента.

hidden: содержимое, выходящее за пределы блока элемента, будет скрыто.

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

auto: добавляет полосы прокрутки, если необходимо.

initial: устанавливает значение по умолчанию.

inherit: устанавливает значение, которое задано для родительского элемента.

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

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

<div>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus.  Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>

CSS

#box {
	width: 200px;
	height: 100px;
	background-color: #FD2D0F;
	overflow: visible;
}

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Overflow: hidden CSS скрывает содержимое, выходящее за пределы контейнера.

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

В приведенной ниже демо-версии полосы прокрутки добавлены для обоих блоков, даже когда размеры содержимого не превышают высоту и ширину второго блока.

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

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

Свойства overflow-x hidden и overflow-y задают, как содержимое, выходящее за рамки контейнера, отображается в горизонтальном и вертикальном направлении. Для них можно задать все шесть значений, описанных выше.

Давайте рассмотрим примеры.

HTML

<div>
	<div></div>
</div>

Если ширина внешнего блока составляет 200 пикселей, а внутреннего — 250 пикселей, то задав для внешнего блока overflow-x: auto, мы добавим в него горизонтальную полосу прокрутки, так как ширина содержимого превышает ширину блока.

Если высота внешнего блока 100 пикселей, а высота внутреннего блока — 150 пикселей, то overflow-y: auto добавляет вертикальную полосу прокрутки.

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

В этом случае можно разбить слово и принудительно перенести его на новую строку, используя свойство word-wrap, указав для него значение break-word.

HTML

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus.
</div>

CSS

#box {
    width: 200px;
    height: 100px;
    background-color: #FD2D0F;
}

Если мы укажем word-wrap: break-word, выходящее за пределы контейнера слово разбивается на два, чтобы оно могло вписаться в пределы контейнера body overflow hidden.

Свойство overflow отлично работает во всех браузерах. IE 4-6 расширяет контейнер, чтобы он соответствовал ширине содержимого.

Вадим Дворниковавтор-переводчик статьи «CSS overflow Property»

Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!

Определение и значение переполнения — Merriam-Webster

1 из 2

перелив ˌō-vər-ˈflō

переходный глагол

1

: покрыть водой или как будто водой : затопить выше краев

3

: вызвать переполнение

непереходный глагол

1

: переливаться

2

: заполнять пространство до отказа и распространяться за его пределы

толпа вышла на улицу

переполнение

2 из 2

перелив ˈō-vər-ˌflō

1

: перелив : затопление

2

: то, что перетекает : избыток 90 003

3

: слив или емкость для избыточной жидкости

Синонимы

Глагол

  • переполнение

Существительное

  • намыв
  • ванна
  • катаклизм
  • катаракта
  • потоп
  • наводнение
  • прилив
  • наводнение
  • Ниагара
  • наплевать
  • torrent
Просмотреть все синонимы и антонимы в тезаурусе 

Примеры предложений

Глагол Река вышла из берегов . Ручей 9Каждую весну 0111 переполняет . Вода в ванне переполнилась . Книги и бумаги заполнили его стол. Параграф переполнил страницу. Существительное отличный перелив воды от проливных дождей вынесло грязь и ил на шоссе переполнение помощи на самом деле усложнило работу Узнать больше

Последние примеры в Интернете

После того, как быстро вышла из берегов и хлынула на дома и предприятия в верхнем течении, река Миссисипи достигла гребня на большей части Верхнего Среднего Запада, ослабив опасения по поводу рекордного бедствия, хотя, по прогнозам, крупные наводнения в регионе продолжатся до середины -Может. — Дойл Райс, USA TODAY , 3 мая 2023 г. Парк был переполнен женщинами, детьми и пожилыми людьми, страдающими от жары. — Вивиан Нерейм, 9 лет.0111 Нью-Йорк Таймс , 1 мая 2023 г. По данным столичного канализационного округа Большого Цинциннати, такие погодные условия могут привести к переливу канализации в местные ручьи и реки. — Эрин Коуч, The Enquirer , 24 марта 2023 г. На приведенных ниже фотографиях, сделанных с разницей в 10 дней, показано, что произошло после того, как озеро Саксесс вздулось и богатая наносами коричневая вода попала в реку Туле.0111 переполнил в низинах. — Терри Кастлман, Los Angeles Times , 22 марта 2023 г. Посмотрите на этот коктейль , переполненный парами сухого льда ! — Сэм Стоун, Приятного аппетита , 22 марта 2023 г. Эта встреча стала центром необычного нового сериала Ли на Netflix «Говядина» (премьера 6 апреля).0112 с драмой и черной комедией. — Алан Сепинуолл, Rolling Stone , 20 марта 2023 г. Возможно, в вашем почтовом ящике переполнено похожими сообщениями. — Байрихард Айзенберг, Fortune Well , 6 марта 2023 г. Нас засыпает безостановочной рекламой: от почтовых ящиков , переполненных рекламными акциями, до формы спортивных команд и забитых рекламой метро. — Фил Вахба, 9 лет0111 Fortune , 24 февраля 2023 г.

Переполнение оставило под водой примерно пятую часть полей. — Медора Ли, USA TODAY , 5 мая 2023 г. Fox News стал свидетелем стоячей толпы с переполнение комната заполнена. — Пол Штайнхаузер, Fox News , 19 апреля 2023 г. Переполнение длилось в общей сложности 44,5 часа с 27 февраля по 1 марта. — Кейтлин Луби, Journal Sentinel , 3 марта 2023 г. Без фундамента прошлого нынешнее переполнение драмы Гомес против Бибера рушится. — Лариша Пол, 9 лет0111 Rolling Stone , 3 марта 2023 г. Комната комитета была местом стояния только для голосования, а все остальные смотрели из переполненной комнаты или стояли снаружи в коридоре. — Оливия Краут, The Courier-Journal , 2 марта 2023 г. Воскресным утром в колл-центре округа Саммит г-жа Даммер обучала новичка-диспетчера Джеффа Фитча работе на поле 9.11 звонков, в то время как г-н Беттс и другой диспетчер, Дэвид Бенсон, обрабатывали переполнение и связывались с машинами скорой помощи и полицией. — Мэтт Рихтел, New York Times , 3 февраля 2023 г. Избирательная комиссия палаты представителей одобрила законопроект две недели назад после публичных слушаний, которые привлекли толпу из человек и вызвали бурные дебаты. —Майк Кейсон | [email protected], al , 26 января 2023 г. Зона разогрева Салливана — пространство размером 30 на 240 футов на северо-западном мезонине арены, отдельное от убежища, его кроватей и услуг — было переполнено 90 111 переполненными 90 112 людьми. — Эмили Гудикунц, Anchorage Daily News , 18 декабря 2022 г. Узнать больше

Эти примеры программно скомпилированы из различных онлайн-источников, чтобы проиллюстрировать текущее использование слова «переполнение». Любые мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв об этих примерах.

История слов

Первое известное использование

Глагол

до 12 века, в значении, определенном в переходном смысле 1

Существительное

1568, в значении, определенном в смысле 1

Путешественник во времени

Первое известное использование переполнения было до 12 века

Посмотреть другие слова из того же века переполнение

переполнение

ошибка переполнения

Посмотреть другие записи поблизости

Процитировать эту запись «Переполнение».

Словарь Merriam-Webster.com , Merriam-Webster, https://www.merriam-webster.com/dictionary/overflow. Доступ 22 мая. 2023.

Копия цитирования

Детское определение

переполнение

1 из 2 глагол

перелив ˌō-vər-ˈflō

1

: покрывать водой или как бы водой

река вышла из берегов ее берега

3

: выйти за границы

ручей переливы каждую весну

4

: для заполнения пространства и распространения за его пределы

абзац переполнен страница

переполнен

2 из 2 существительное

перелив ˈō-vər-ˌflō

1

: перетекание : наводнение

2

: то, что перетекает : излишек 9000 3

3

: выпускное отверстие или емкость для перелива жидкости

Медицинские Определение

переполнение

существительное

перелив ˈō-vər-ˌflō

: избыточный поток или количество

Еще от Merriam-Webster о

overflow

Английский: Перевод overflow для испаноговорящих

Britannica English: Translation of переполнение для говорящих на арабском языке

Последнее обновление: — Обновлены примеры предложений

Подпишитесь на крупнейший словарь Америки и получите тысячи дополнительных определений и расширенный поиск без рекламы!

Merriam-Webster без сокращений

Overflow Определение и значение | YourDictionary

ōvər-flō

переполнен, переполнен, переполнен

глагол

переполнен, переполнен, переполнен

Течь за пределы; наезжать.

Webster’s New World

Для заполнения сверх емкости в качестве контейнера или водного пути.

Американское наследие

Быть более чем полным или законченным; быть избыточным.

Новый мир Вебстера

Перетекать или пересекать; наводнение.

Новый мир Уэбстера

Течь через край или край.

Новый мир Вебстера

Синонимы:

  • Синонимы:
  • перетекание
  • пузырьковое переполнение
  • круговое перекрытие
  • до краев
  • край
  • рывок
  • струя
  • струя
  • струя
  • душ
  • струя
  • струя
  • утечка
  • слив
  • носик вперёд

Реклама

сущ.

переливы

Перелив или переполнение.

Новый мир Вебстера

Что-то перетекающее; избыток.

Американское наследие

Сумма, которая переполняется; излишек.

Новый мир Вебстера

Выход для перелива жидкости.

Новый мир Вебстера

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

Американское наследие

Синонимы:

  • Синонимы:
  • чрезмерный
  • подавляющий
  • чрезмерный
  • нарушение 900 78
  • наступление
  • посягательство
  • теснота
  • переизбыток
  • перелив
  • погружение
  • погружение
  • перелив
  • затопление
  • движение
  • толчок
    • 90 079 Антонимы:

    • Антонимы:
    • дефицит
    • дефицит
    • недостаток

    Реклама

    Другие формы слова переполнение

    Существительное

    Единственное число:

    переполнение

    Множественное число:

    переполнение

    Происхождение переполнения

    • Буквально соответствует лишнему, что происходит от латинского, а не германского.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *