Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
overflow

В некоторых случаях содержимое элемента может выйти за пределы его границ. Это возможно по следующим причинам:

  1. В результате невозможности разрыва строки, содержимое элемента выходит за границы элемента;
  2. Когда блочный элемент шире содержащего элемента ;
  3. Когда высота блочного элемента превышает высоту содержащего элемента;
  4. При абсолютном позиционировании элемента;
  5. При отрицательных значениях свойства margin.

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

visible Содержимое блока не обрезается, а переходит за границы содержащего элемента.
hidden Содержимое элемента обрезается, при этом образуемая, в результате обрезки невидимая часть не может быть прокручена, пользователи не будут иметь доступ к ней вообще. Размеры и форма обрезаемого участка должны определяться свойством clip.
scroll Выдающаяся часть элемента обрезается, но для пользователя она становится доступна с использованием скроллинга. Если свойство medium имеет значения 'print' or 'projection' обрезаемая всё равно часть будет напечатана.
auto Обрезаемая часть элемента определяется браузером, однако она должна быть доступна с помощью скроллинга.

Пример. Так как в данном случае свойство oveflow установлено по умолчанию как visible, поэтому выступающая часть элемента будет видна.

  1.<!DOCTYPE html>
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Cвойство overflow</TITLE>
  5.<STYLE type="text/css">
  6.DIV { width : 100px; height: 100px;
  7. border: thin solid red;
  8. }
  9.
10.BLOCKQUOTE { width : 125px; height : 100px;
11. margin-top: 50px; margin-left: 50px;
12. border: thin dashed black
13. }
14.
15.DIV.attributed-to { text-align : right; }
16.
17.</STYLE>
18.</HEAD>
19.<BODY>
20.<DIV>
21.<BLOCKQUOTE>
22.<P>Справедливость без мудрости значит много,
23.мудрость без справедливости не значит ничего.
24.<DIV class="attributed-to">- Цицерон</DIV>
25.</BLOCKQUOTE>
26.</DIV>
27.
28.</BODY>
29.</HTML>
Cвойство overflow
Cвойство overflow

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

  1.<!DOCTYPE html>
  2.<HTML>
  3.<HEAD>
  4.<TITLE>overflow: hidden</TITLE>
  5.<STYLE type="text/css">
  6.DIV { width : 100px; height: 100px;
  7.border: thin solid red;
  8.overflow: hidden;
  9.}
10.BLOCKQUOTE { width : 125px; height : 100px;
11.margin-top: 50px; margin-left: 50px;
12.border: thin dashed black
13.}
14.DIV.attributed-to { text-align : right; }
15.</STYLE>
16.</HEAD>
17.<BODY>
18.<DIV>
19.<BLOCKQUOTE>
20.<P>Справедливость без мудрости значит много,
21.мудрость без справедливости не значит ничего.
22.<DIV class="attributed-to">- Цицерон</DIV>
23.</BLOCKQUOTE>
24.</DIV>
25.</BODY>
26.</HTML>
Пример свойства width
Пример свойства width


Доступ и установка с jQuery

  • Получить свойство overflow: val = $("div").css("overflow");
  • Установить свойство overflow: $("div").css({"overflow":"..."});
  • Установить свойство overflow: $("div").css("overflow","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org