Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : overflow
смотрим также
Материал из Справочник Web-языков
Содержание |
Атрибут overflow | Свойство overflow
Определяет как обрабатывать контент в объекте, если он не умещается в нем по ширине и высоте.
Синтаксис
HTML | { overflow : sOverflow } |
Скрипты | [ sOverflow = ] object.style.overflow |
Используемые значения
- sOverflow
- Строка, которая может определять и принимать одно из следующих значений:
- visible
- Значение по умолчанию. Содержимое не обрезается и всегда отображается, полосы прокрутки не добавляются к объекту даже если контент превосходит установленные размеры.
- scroll
- Контент обрезается. К объекту добавляются полосы прокрутки, причем даже тогда, когда содержимое поместилось в объект.
- hidden
- Контент, выходящий за границы объекта, не показывается.
- auto
- Контент обрезается и полосы прокрутки появляются только когда это необходимо.
- -moz-hidden-unscrollable
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является visible, кроме объекта textarea; для него это hidden. Атрибут Каскадных таблиц стилей (CSS) не наследуется.
Замечания
Значением по умолчанию для элемента body является auto.
Если для свойства overflow объекта textarea задать значение hidden, то у объекта textarea автоматически не будут показываться полосы прокрутки.
Если свойству overflow задать значение visible, то текст будет обрезаться до размера окна или рамки объекта.
Это свойство доступно на платформе Macintosh также как в Microsoft Internet Explorer 5.
Начиная с Internet Explorer 6.0, когда вы используете объявление !DOCTYPE, свойство overflow применяется к объекту html.
Примеры
В первом примере используется атрибут overflow для автоматического выравнивания контента при загрузке страницы.
<div id="oDiv" style="width: 200px; height: 200px; overflow: auto;"> ... </div>
Во втором примере вы можете динамически задавать значение для свойства overflow объекта div.
<script type="text/javascript"> function SetOverflow(o, sValue) { o.style.overflow = sValue; } </script> <div id="div1" style="font-size: 18pt; background-color: yellow; height: 50px; width: 75px"> Шустрая рыжая лисичка перепрыгнула ленивого пса.</div> <select onchange="SetOverflow(div1, this.options[this.selectedIndex].text)"> <option selected="">visible</option> <option>scroll</option> <option>hidden</option> <option>auto</option> </select>
Стандарты
Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)
Поддерживаемые браузеры
Internet Explorer 5.0, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.5, 9.6, 10.0
Safari 1.2, 2.0, 3.1
Firefox 1.5, 2.0, 3.0, 3.5
Смотри также
overflowX, overflowY, position.
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms530824(VS.85).aspx