overflow | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+3.61.0+1.0+1.0+

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

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
   } 
  </style>
 </head>
 <body> 
   <div>
   <h3>Duis te feugifacilisi</h3>
   <p>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.
 
 </p>
  </div> 
 </body>
</html>

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

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

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

[window.]document.getElementById(«elementID»).style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

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

CSS по теме

  • overflow

Статьи по теме

  • 4 метода создания колонок одинаковой высоты
  • Блочная модель
  • Главная страница
  • Колонки одинаковой высоты
  • Особенности таблиц
  • Особенности таблиц
  • Плавающие элементы
  • Подвал страницы
  • Прощай -9999px: новая техника замены изображений через CSS
  • Резиновый двухколоночный макет
  • Резиновый трёхколоночный макет

Статьи по теме

Рецепты CSS

  • Как заменить текст изображением?
  • Как создать рамку со скругленными уголками без изображений?
  • Как убрать полосы прокрутки?

Свойство overflow

`;document.write(t),showTopNotification()}}
  • ARعربي
  • ENEnglish
  • ESEspañol
  • FAفارسی
  • FRFrançais
  • IDIndonesia
  • ITItaliano
  • JA日本語
  • KO한국어
  • RUРусский
  • TRTürkçe
  • UKУкраїнська
  • ZH简体中文

Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире.

Пожалуйста, помогите нам перевести это руководство на свой язык

КупитьEPUB/PDF

8 сентября 2019 г.

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

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

Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое «переполняет» блок. Его отображение в этом случае задаётся свойством overflow.

Возможные значения

  • visible (по умолчанию)
  • hidden
  • scroll
  • auto

Если не ставить overflow явно или поставить visible, то содержимое отображается за границами блока.

Например:

<style>
  .overflow {
    /* overflow не задан */
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера – используют другие значения.

Переполняющее содержимое не отображается.

<style>
  .overflow {
    overflow: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
  Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>

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

Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.

При переполнении отображается полоса прокрутки.

<style>
  .overflow {
    overflow: auto;
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>
<div>
  auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
  Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
  Этот текст даст прокрутку снизу
</div>

Полоса прокрутки отображается всегда.

<style>
  .overflow {
    overflow: scroll;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  scroll
  Переполнения нет.
</div>

То же самое, что auto, но полоса прокрутки видна всегда, даже если переполнения нет.

Можно указать поведение блока при переполнении по ширине в overflow-x и высоте – в overflow-y:

<style>
  .overflow {
    overflow-x: auto;
    overflow-y: hidden;
    width: 200px;
    height: 80px;
    border: 1px solid black;
  }
</style>
<div>
  ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
  Этот текст вылезает снизу Этот текст вылезает снизу
  Этот текст вылезает снизу Этот текст вылезает снизу
</div>

Свойства overflow-x/overflow-y (или оба одновременно: overflow

) задают поведение контейнера при переполнении:

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

Кроме того, значение overflow: auto | hidden изменяет поведение контейнера, содержащего float. Так как элемент с float находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой overflow

, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье Свойство float.

Предыдущий урокСледующий урок

Поделиться

Карта учебника

  • © 2007—2022  Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

Свойство переполнения CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Показать различные значения свойства переполнения:

div. ex1 {
 переполнение: прокрутка;
}

div.ex2 {

переполнение: скрыто;
}

div.ex3 {
  переполнение: авто;
}

div.ex4 {
  переполнение: клип;
}

div.ex5 {
  переполнение: видимое;
}

Попробуйте сами »

Определение и использование

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

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

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

Показать демонстрацию ❯

Значение по умолчанию: видимый
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: CSS2
Синтаксис JavaScript: объект .style.overflow=»scroll» Попытайся

Поддержка браузера

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

Собственность
переполнение 1,0 4,0 1,0 1,0 7,0

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

Синтаксис CSS

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

Значения свойств

Значение Описание Демо
видимый Переполнение не отсекается. Он отображается за пределами поля элемента. Это по умолчанию Демонстрация ❯
скрытый Переполнение обрезается, и остальное содержимое будет невидимым. Содержимое можно прокручивать программно (например, установив scrollLeft или прокрутить()) Демонстрация ❯
зажим Переполнение обрезается, и остальное содержимое будет невидимым. Запрещает прокрутку, включая программную прокрутку. Демонстрация ❯
свиток Переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого Демонстрация ❯
авто Если переполнение обрезано, необходимо добавить полосу прокрутки, чтобы увидеть остальную часть содержимого Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Переполнение CSS

Учебник CSS: Позиционирование CSS

Ссылка HTML DOM: свойство переполнения

❮ Предыдущий Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Популярные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS overflow-x

❮ Назад Полное руководство по CSS Далее ❯


Пример

Показать различные значения свойства overflow-x:

div. ex1 {
  переполнение-x: прокрутка;
}

div.ex2 {
переполнение-x: скрыто;
}

div.ex3 {
  переполнение-x: авто;
}

div.ex4 {
  переполнение-x: видимое;
}

Попробуйте сами »

Определение и использование

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

Совет: Используйте свойство overflow-y определить отсечение на верхний и нижний края.

Показать демо ❯

Значение по умолчанию: видимый
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: CSS3
Синтаксис JavaScript: объект . style.overflowX=»прокрутка» Попытайся

Поддержка браузера

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

Цифры, за которыми следует -ms-, укажите первую версию, которая работала с префикс.

Собственность
перелив-х 4,0 9,0
8,0 -мс-		 3,5 3,0 9,5

Синтаксис CSS

overflow-x: visible|hidden|scroll|auto|initial|inherit;

Значения свойств

Значение Описание Демо
видимый Содержимое не обрезается и может отображаться за пределами левого и правые края. Это по умолчанию Демонстрация ❯
скрытый Содержимое обрезано, и механизм прокрутки не предусмотрен Демонстрация ❯
свиток Содержимое обрезается и предоставляется механизм прокрутки Демонстрация ❯
авто Должен обеспечиваться механизм прокрутки для переполненных полей Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о наследовать

Связанные страницы

Учебник CSS: CSS Overflow

Ссылка HTML DOM: свойство overflowX

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

9 Top References HTML Reference


CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

No related posts.