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

В некоторых случаях содержимое блока отображается за пределами границ элемента, накладываясь на него. Для управления поведением блочных элементов используется свойство 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.