Как обрезать элемент?

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

С помощью свойства clip можно обрезать элемент по заданным размерам.

1. Свойство overflow

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed;. Текст может переполнять блок по высоте, изображения — по высоте и ширине.

overflow
Значения:
visible Значение по умолчанию. Весь контент становится видимым независимо от размеров блока-контейнера. Возможно перекрытия содержимого соседних блоков.
scroll Добавляет полосы прокрутки внутри области отображения элемента, которые отображаются даже в случае, когда содержимое по размерам помещается внутри блока. Размеры контейнера не меняются.
auto Добавляет полосы прокрутки только в случае необходимости.
hidden Скрывает содержимое, выходящее за границы блока. Может скрыть часть содержимого. Используется для блоков-контейнеров, содержащих плавающие элементы. Также предотвращает отображение фона или границ под плавающими элементами (для которых задано свойство float: left / right;. При этом размеры контейнера не изменяются.
overflow
Рис. 1. Обрезка содержимого блока с помощью свойства overflow
Синтаксис:

div {
width: 200px;
height: 150px;
overflow: hidden;
}

2. Свойство overflow-x

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

overflow-x
Значения:
visible Значение по умолчанию. Контент не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытия содержимого соседних блоков.
scroll Контент обрезается снизу и справа, при этом добавляются горизонтальная и вертикальная полосы прокрутки внутри области отображения элемента, которые отображаются даже в случае, когда содержимое по размерам помещается внутри блока. Размеры контейнера не меняются.
auto Добавляет полосы прокрутки только в случае необходимости.
hidden Контент, переполняющий блок по горизонтали, обрезается.

Синтаксис:

div {
overflow-x: hidden;
}

3. Свойство overflow-y

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

overflow-y
Значения:
visible Значение по умолчанию. Контент не обрезается, а отображается поверх границ блока-контейнера. Возможно перекрытия содержимого соседних блоков.
scroll Контент обрезается снизу и справа, при этом добавляются горизонтальная и вертикальная полосы прокрутки внутри области отображения элемента, которые отображаются даже в случае, когда содержимое по размерам помещается внутри блока. Размеры контейнера не меняются.
auto Добавляет полосы прокрутки только в случае необходимости.
hidden Контент, переполняющий блок по вертикали, обрезается.

Синтаксис:

div {
overflow-y: hidden;
}

4. Свойство clip

Свойство определяет, какая часть элемента будет видна. Часть элемента, которая останется видимой после обрезки, называется областью отсечения. Отсечение применяется к элементу, который изначально полностью видимый. Свойство применяется к элементам, для которых установлено свойство position со значениями absolute или fixed.

clip
Значения:
auto Значение по умолчанию. Элемент не обрезается.
rect() Функция принимает четыре параметра, которые нужно указывать через запятую в следующем порядке: верхнее, правое, нижнее, левое. Верхнее и нижнее значения определяют смещение от верхней границы, а левое и правое значения определяют смещение от левой границы.
inherit Наследует это свойство от родительского элемента.

See the Pen xEwAPO by Elena (@html5book) on CodePen.

Поделиться:

Печать html-документов

1. Правило @page

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin, а также задать разрывы страниц в указанном месте.

@page {
margin: 2in;
}

Можно задавать отдельные поля документа внутри правила @page, такие как margin-top, margin-right, margin-bottom, margin-left:

@page {
margin: 1in;
margin-left: 1.5in;
}

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before, page-break-after и page-break-inside. Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static.

page-break-before
Значения:
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы перед элементом.
avoid Отменяет размещение разрыва перед элементом, если это возможно.
left Добавляет один или два разрыва страниц перед элементом, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц перед элементом. Элемент будет печататься, начиная с верха правой границы. Следующая страница будет форматироваться как правая страница.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
h1 {page-break-before: always;}
}
page-break-after
Значения:
auto Значение по умолчанию, задает автоматические разрывы страниц.
always Всегда добавляет разрыв страницы после элемента.
avoid Отменяет добавление разрыва после элемента, если это возможно.
left Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как левая страница. Элемент будет печататься, начиная с верха левой страницы, т.е. на странице слева от корешка. При двусторонней распечатке будет выводиться на оборотной стороне листа бумаги.
right Добавляет один или два разрыва страниц после элемента так, чтобы следующая страница форматировалась как правая страница. Элемент будет печататься, начиная с верха правой границы.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
footer {page-break-after: always;}
}

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

page-break-inside
Значения:
auto Значение по умолчанию. Автоматический разрыв страницы.
avoid Запрещает разрыв страницы внутри элемента, если это возможно.
inherit Наследует это свойство от родительского элемента.

Синтаксис:

@media print {
img {
display: block;
page-break-inside: avoid;
}
}

Поделиться: