Загрузка...

Overflow в CSS

Вы можете задать боксу фиксированный размер. А если контент выше или шире этого бокса? overflow решает: лишнее вылезет наружу, обрежется или станет прокручиваемым.

Ключевые слова одним взглядом

📊 Частые значения overflow

Значение Повседневный смысл
visible (по умолчанию) Лишний контент может выйти за бокс
hidden Лишнее обрезается; без полос прокрутки
scroll Полосы показываются (часто даже когда не нужны)
auto Полосы появляются только при переполнении

По умолчанию: контент может вылезать

С overflow: visible (по умолчанию) длинный контент может рисоваться за краями бокса.

Видимый overflow (по умолчанию)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Обрезать через hidden

overflow: hidden отрезает всё, что не помещается. Удобно для чистых краёв — но пользователь не прокрутит остальное.

Hidden обрезает переполнение

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Всегда полосы со scroll

overflow: scroll делает бокс прокручиваемым и обычно резервирует место под полосы, даже когда контент помещается.

Всегда scroll

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — прокрутка только когда нужно

overflow: auto — спокойный повседневный выбор для панелей: полосы появляются при переполнении и часто не мешают, когда всё помещается.

Auto когда нужно

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Управлять одной осью

Используйте overflow-x и overflow-y, когда горизонтальное и вертикальное поведение должны отличаться — например, вертикальная прокрутка и обрезка бокового вылезания.

Вертикальная прокрутка, горизонтальная обрезка

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

Практичная привычка для панели

Дайте боксу реальную высоту (или max-height), затем выберите auto для читаемых прокручиваемых областей.

Прокручиваемая панель заметок

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

Попробуйте сами

  1. Сделайте бокс с width и короткой height, вставьте несколько абзацев.
  2. Переключайте overflow между visible, hidden, scroll и auto.
  3. Поставьте overflow-x: hidden и overflow-y: auto на широкую строку текста.
  4. Соберите .note-panel с max-height и смотрите полосы только когда нужно.
  5. Без ограничения высоты (или max-height) overflow часто нечем ограничивать.

Частые ошибки

  • Ждать эффект overflow без ограниченной высоты или ширины
  • Ставить scroll везде, когда auto спокойнее
  • Путать overflow (переполнение бокса) с text-overflow (многоточие у текста — позже)
  • Обрезать через hidden и забывать, что пользователю может понадобиться остальное
  • Думать, что overflow меняет арифметику box-sizing (нет)

Кратко

  • Overflow управляет вылезанием, обрезкой и прокруткой, когда контент больше бокса
  • По умолчанию visible; hidden обрезает; scroll даёт полосы; auto когда нужно
  • Обычно нужен ограниченный размер (height / max-height / width), чтобы увидеть эффект
  • overflow-x и overflow-y разделяют оси
  • Для многих панелей overflow: auto — спокойная привычка

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок