Переполнение и обрезка
В большинстве случаев содержимое блочного элемента располагается внутри края содержимого его объемлющего прямоугольника. Однако, в некоторых случаях происходит переполнение, т. е. часть содержимого оказывается за пределами этого прямоугольника, например:
Строка текста не может быть разорвана, и строчный блок становится шире блочного прямоугольника.
Блочный прямоугольник слишком широк для вмещающего блока.
Высота элемента больше, чем значение свойства height вмещающего блока.
Элемент абсолютно позиционирован.
Объемлющий прямоугольник имеет отрицательные границы.
Всякий раз, когда происходит переполнение, значение свойства overflow указывает как следует (и следует ли вообще) обрезать содержимое блока; размер и форма области обрезки при этом задается свойством clip.
Реакция на переполнение: свойство overflow
| Синтаксис: | overflow: visible | hidden | scroll | auto | inherit | | Начально: | visible | | Применимо: | к блочным и внешним элементам | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : |  | Соответствует стандарту (4.0+) | | |  | Не поддерживается |
Свойство overflow определяет правила обрезки содержимого элемента при переполнении. Оно может принимать следующие значения:
| visible | Содержимое не обрезается, т. е. отображается за пределами объемлющего прямоугольника. | | hidden | Содержимое обрезается; размер и форма области обрезки при этом задается свойством clip. | | scroll | Содержимое обрезается, но обозреватель должен обеспечить механизм прокрутки содержимого для того, чтобы пользователь мог получить доступ ко всему содержимому элемента. При отображении на устройства print и projection должно печататься все содержимое элемента. | | auto | Содержимое обрезается, и при необходимости обеспечивается прокрутка содержимого. |
Рассмотрим следующий пример.
<DIV style="width: 100px; height: 100px; border: thin solid red; overflow: scroll">
<BLOCKQUOTE style="width: 125px; height: 100px; margin-top: 50px;
margin-left: 50px; border: thin dashed black">
<P>Если бы строители строили здания так же, как программисты пишут
программы, первый залетевший дятел разрушил бы цивилизацию.</P>
<P style="text-align: right">Второй закон Вейнберга</P>
</BLOCKQUOTE>
</DIV>
Здесь элемент BLOCKQUOTE выходит за пределы содержащего его элемента DIV, поэтому этот фрагмент будет отображаться так (Netscape Navigator 4.x не поддерживает обрезку и прокрутку!):
Если бы строители строили здания так же, как программисты пишут программы,
первый залетевший дятел разрушил бы цивилизацию.
Второй закон Вейнберга
Область обрезки: свойство clip
| Синтаксис: | clip: rect( <top>,<right>,<bottom>,<left> ) | auto | inherit | | Начально: | auto | | Применимо: | к блочным и внешним элементам | | Наследуемо: | нет | | Проценты: | не используются | | Устройства: | визуальные |
| Поддержка : | | Поддерживается только для абсолютно позиционированных элементов (4.0+) | | | | Поддерживается только для слоев (layers) (4.0+) |
Свойство clip задает облесть обрезки содержимого элемента при переполнении. Оно может принимать следующие значения:
auto
Область обрезки совпадает с объемлющим прямоугольником.
rect( <top>,<right>,<bottom>,<left> )
Область вырезки является прямоугольником с заданными координатами, где
<top>,<right>,<bottom> и <left> - это смещения от соответствующих сторон
объемлющего прямоугольника. Каждое из этих смещений должно быть равно либо
auto (что означает нулевое смещение), либо <размер>. Отрицательные смещения
допускаются.
Пример:
P { clip: rect(5px, -5px, 10px, 5px); }
1 2 3 4 5 6
8 8 8
| |
*
Обратная связь