Переполнение и обрезка

overflow, text-overflow, clip-path, mask, object-fit и управление тем, что не поместилось в блок.

Уровень: средний 10 разделов 1,5 часа

1. Что такое переполнение

Переполнение случается, когда контент больше блока: длинное слово, огромное изображение, много пунктов. Браузер по умолчанию показывает его «вылезающим» (overflow: visible). Управление переполнением — три слова: visible, hidden, scroll (и auto).

.box { overflow: visible; }   /* по умолчанию: контент вылазит */
.box { overflow: hidden; }    /* обрезать всё лишнее */
.box { overflow: auto; }      /* скролл, если нужно */
.box { overflow-x: hidden; }  /* по одной оси */

2. overflow и его ловушки

overflow: hidden помогает схлопывание и обрезку, но подрезает sticky-детей;
overflow: auto появляется только при настоящем переполнении;
не задавайте overflow в этом же блоке, где нужен sticky;
overflow: clip — обрезает без скроллбаров (современное значение).

.scroll-y { overflow-y: auto; max-height: 320px; }
.safe { overflow: clip; }

3. text-overflow

Однострочное обрезание текста: white-space: nowrap + overflow: hidden + text-overflow: ellipsis дают многоточие «…». Для двух-трёх строк — line-clamp.

.one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

line-clamp поддерживается всеми современными браузерами. Следите за box-orient — без него clamp не работает.

4. max-height для аккордеонов

Скрытые панели с анимацией раскрытия классика: max-height: 0 → max-height: 500px. Высота переходом анимируется только через max-height (если не использовать grid-template-rows).

.acc__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
.acc.open .acc__panel { max-height: 400px; }

5. object-fit и object-position

Для изображений/видео внутри блока: cover — заполнить, обрезая края, contain — вписать целиком, fill — растянуть до деформации. object-position двигает видимую область.

.cover {
  width: 300px; height: 200px;
  object-fit: cover;          /* без деформации, обрезка краёв */
  object-position: center 30%; /* фокус на верхней части фото */
}

6. clip-path — вырезка фигурами

clip-path вырезает видимую область по форме: круг, многоугольник, закруглённый прямоугольник. Удобно для аватарок, кадрирования фото и анимированных раскрытий.

.avatar { clip-path: circle(50% at 50% 50%); }
.poly { clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.reveal { clip-path: inset(0 0 100% 0); transition: clip-path 0.4s; }
.reveal:hover { clip-path: inset(0); }

inset() — прямоугольная вырезка;
circle(), ellipse() — овалы;
polygon() — произвольный многоугольник;
генератор форм: bennettfeely.com/clippy.

7. mask и маскирование

mask рисует «трафарет» над элементом: белые пиксели видимы, чёрные — скрыты. Классика — плавное растворение краёв у изображений (маска-градиент).

.fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

mask чаще всего встречается с -webkit- префиксом в Safari. Гуглите «mask-image fade» для готовых паттернов растворения.

8. Сколько «обрезать»: aspect-ratio

Чтобы блок с переполнением имел стабильный размер, задайте соотношение сторон: aspect-ratio сохраняет пропорции при изменении ширины.

.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
.avatar { aspect-ratio: 1; border-radius: 50%; }

атрибут работает на любом элементе с width;
height: auto по умолчанию считает по соотношению.

9. Разбор реальных сценариев

Сценарий	Решение
длинное слово в узкой колонке	overflow-wrap: break-word; word-break: break-word;
картинка вылазит из ленты	img { max-width: 100%; height: auto; }
много пунктов в панели	overflow-y: auto; max-height: 320px;
две строки в титуле	-webkit-line-clamp: 2 + overflow: hidden
фото с фиксированным блоком	object-fit: cover + width/height

10. Чек-лист переполнения

изображения имеют max-width/object-fit;
длинный текст разбивается (overflow-wrap);
скролл-панели ограничены max-height + overflow-y: auto;
clip-path/mask используются осознанно, а не для «красоты на всё»;
line-clamp подключён через убрание overflow: visible.

Что дальше

Курс завершён.

← Вернуться к курсам