Справочник по 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.

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530824(VS.85).aspx

https://developer.mozilla.org/en/CSS/overflow

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования