Overflow и видимость

overflow управляет тем, что происходит, когда контент выходит за границы элемента. overflow: hidden — обрезает, scroll — добавляет скролл, auto — скролл только при необходимости. text-overflow: ellipsis — многоточие при обрезке текста. visibility и clip-path — управление видимостью.

Свойства overflow:

overflow: visible (по умолчанию):

• Контент выходит за границы элемента

overflow: hidden:

• Контент обрезается за границами
• Создаёт BFC (Block Formatting Context)

overflow: scroll:

• Всегда показывает скроллбары (даже если не нужны)

overflow: auto:

• Скроллбары только при необходимости

overflow-x / overflow-y:

• Управляют горизонтальным/вертикальным скроллом отдельно

Текстовое обрезание: white-space: nowrap; /* Текст в одну строку */ overflow: hidden; /* Обрезка */ text-overflow: ellipsis; /* Многоточие */

Другие свойства видимости: visibility: hidden — невидим, но место сохраняет opacity: 0 — прозрачный, но место сохраняет clip-path: circle(50%) — обрезка по форме

Overflow — как окно. visible — штора открыта, цветы торчат. hidden — штора закрыта, обрезает. scroll — рулонная штора с колёсиком. auto — штора появляется только когда нужно.

**Самый простой:**

/* Обрезка длинного текста */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Скроллируемый блок */
.code {
  overflow: auto;
  max-height: 300px;
}

Текстовое обрезание и скроллируемый блок.

**Простой:**

/* Карточка с обрезкой */
.card-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Скроллируемая таблица */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Скрытый, но доступный для скринридеров */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Мультистрочное обрезание, горизонтальный скролл, sr-only.

**Реальный пример:**

/* Ограничение контента */
.collapsible {
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible.expanded {
  max-height: none;
}

/* Обрезка картинки по кругу */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover-эффект с overflow */
.card {
  overflow: hidden;
  border-radius: 8px;
}

.card-image {
  transition: transform 0.3s;
}

.card:hover .card-image {
  transform: scale(1.1);
  /* overflow: hidden на .card обрезает увеличенную картинку */
}

Реальные паттерны: collapse, аватары, hover-эффекты с overflow.

**Неправильно:** Использовать overflow: hidden для скрытия элемента

**Почему:** overflow: hidden обрезает контент, но элемент остаётся видимым и занимает место.

**Правильно:** Для скрытия: display: none (без места) или visibility: hidden (с местом).

**Неправильно:** Забывать overflow: hidden для border-radius

**Почему:** Без overflow: hidden дочерний контент может «вылезать» за скруглённые углы.

**Правильно:** Для скруглённых углов: родитель — border-radius + overflow: hidden.

**Неправильно:** Не использовать text-overflow: ellipsis

**Почему:** Длинный текст без обрезки ломает макет. ellipsis — элегантное решение.

**Правильно:** Для обрезки: white-space: nowrap + overflow: hidden + text-overflow: ellipsis.

• overflow: auto — скролл при необходимости
• text-overflow: ellipsis — многоточие (нужны white-space: nowrap + overflow: hidden)
• overflow: hidden создаёт BFC и обрезает по border-radius
• visibility: hidden — невидим, но место сохраняет
• sr-only — скрыто от глаз, доступно скринридерам

Назад: Вы знаете размеры элементов (C10) — overflow управляет тем, что происходит, когда контент превышает эти размеры.

Вперёд: В следующем уроке (C12) вы изучите позиционирование: relative, absolute, fixed, sticky.