Пошук уроків, статей та іншого контенту
Навчіться керувати вмістом, що виходить за межі блока, за допомогою overflow та його осейних варіантів.
overflowВластивість overflow визначає, як браузер має поводитися з вмістом, який виходить за межі блока.
За замовчуванням вміст зазвичай залишається видимим і може накладатися на сусідні елементи:
.card {
width: 240px;
height: 100px;
}Якщо текст або дочірній елемент не поміщається в card, він може вийти за межі блока. За допомогою overflow можна:
залишити надлишковий вміст видимим;
обрізати його;
додати смуги прокручування;
показувати прокручування лише за потреби.
overflowvisibleЗначення за замовчуванням. Вміст не обрізається і може виходити за межі елемента.
.box {
width: 200px;
height: 80px;
overflow: visible;
}Це значення підходить, якщо вихід вмісту за межі блока є очікуваною поведінкою.
hiddenНадлишковий вміст обрізається. Смуги прокручування не відображаються.
.box {
width: 200px;
height: 80px;
overflow: hidden;
}Обрізана частина вмісту стає недоступною для звичайного прокручування користувачем. Це часто використовують для:
приховування частини зображення;
обрізання довгого декоративного елемента;
створення блока з фіксованими межами.
scrollБраузер додає смуги прокручування. Зазвичай вони можуть відображатися навіть тоді, коли весь вміст поміщається в контейнер.
.box {
width: 200px;
height: 80px;
overflow: scroll;
}Це гарантує наявність прокручування, але постійні смуги можуть займати зайве місце.
autoСмуги прокручування з’являються лише тоді, коли вміст не поміщається.
.box {
width: 200px;
height: 80px;
overflow: auto;
}auto — найпоширеніший варіант для контейнерів із потенційно великим вмістом.
clipВміст обрізається подібно до hidden, але контейнер не призначений для прокручування. Це більш суворий варіант обрізання вмісту.
.box {
width: 200px;
height: 80px;
overflow: clip;
}Для звичайних випадків приховування вмісту частіше використовують hidden.
overflow одночасно керує переповненням за обома осями:
горизонтальною — x;
вертикальною — y.
Окремо налаштувати їх можна за допомогою:
overflow-x;
overflow-y.
.container {
overflow-x: auto;
overflow-y: hidden;
}У цьому прикладі:
горизонтальний вміст можна прокручувати;
вертикальний вміст обрізається.
Це корисно, наприклад, для довгого рядка або блока, який має прокручуватися лише в одному напрямку.
Властивість overflow може приймати одне або два значення:
.element {
overflow: horizontal vertical;
}Насправді перше значення відповідає горизонтальній осі, а друге — вертикальній:
.element {
overflow: auto hidden;
}Це еквівалентно:
.element {
overflow-x: auto;
overflow-y: hidden;
}Якщо вказано одне значення, воно застосовується до обох осей:
.element {
overflow: auto;
}Це еквівалентно:
.element {
overflow-x: auto;
overflow-y: auto;
}У наступному прикладі є три блоки з однаковими розмірами, але різною поведінкою переповнення:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Властивість overflow</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: Arial, sans-serif;
background: #f3f4f6;
}
.examples {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.example {
min-width: 0;
}
.example h2 {
font-size: 18px;
margin: 0 0 8px;
}
.box {
height: 120px;
padding: 12px;
border: 2px solid #2563eb;
border-radius: 8px;
background: white;
overflow-wrap: break-word;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.auto {
overflow: auto;
}
@media (max-width: 700px) {
.examples {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<main class="examples">
<section class="example">
<h2>visible</h2>
<div class="box visible">
Цей текст може вийти за межі блока, тому що переповнення залишається видимим.
</div>
</section>
<section class="example">
<h2>hidden</h2>
<div class="box hidden">
Цей текст обрізається на межі блока, і користувач не може прокрутити приховану частину.
</div>
</section>
<section class="example">
<h2>auto</h2>
<div class="box auto">
Якщо текст не поміститься, браузер додасть смугу прокручування. Якщо поміститься — смуга не потрібна.
</div>
</section>
</main>
</body>
</html>Горизонтальне прокручування використовують, коли вміст не повинен переноситися на новий рядок. Наприклад, це може бути довгий рядок коду.
<pre class="code-preview">const message = "This is a very long line of code";</pre>.code-preview {
max-width: 100%;
padding: 16px;
overflow-x: auto;
overflow-y: hidden;
white-space: pre;
background: #1f2937;
color: #f9fafb;
}Тут:
white-space: pre зберігає пробіли та забороняє перенесення рядка;
overflow-x: auto додає горизонтальне прокручування за потреби;
overflow-y: hidden приховує вертикальне переповнення.
overflow сам по собі не додає три крапки до обрізаного тексту. Для цього зазвичай комбінують три властивості:
.title {
width: 240px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Результат — довгий текст в один рядок буде обрізано та позначено ....
<p class="title">
Це дуже довгий заголовок, який не повинен займати кілька рядків
</p>Для такої поведінки необхідні всі три властивості:
overflow: hidden — приховує зайву частину;
white-space: nowrap — забороняє перенос рядка;
text-overflow: ellipsis — показує три крапки.
У flex- і grid-розкладках дочірній елемент іноді не стискається настільки, як очікується. У результаті він може спричинити горизонтальне переповнення всієї сторінки.
Типовий спосіб дозволити flex-елементу стискатися:
.layout {
display: flex;
gap: 16px;
}
.content {
min-width: 0;
overflow: auto;
}min-width: 0 дозволяє .content бути вужчим за його початковий мінімальний розмір, а overflow: auto керує вмістом, який усе одно не поміщається.
Для конкретного контейнера сторінки також можна використати:
.page {
overflow-x: hidden;
}Однак приховувати переповнення всієї сторінки варто обережно: так можна випадково зробити частину інтерфейсу недоступною на вузьких екранах.
Щоб прокручування з’явилося, контейнер зазвичай повинен мати обмежену ширину або висоту:
.messages {
width: 320px;
height: 220px;
overflow-y: auto;
padding: 12px;
border: 1px solid #d1d5db;
}Якщо висота контейнера не обмежена, він зазвичай просто розшириться разом із вмістом, і вертикальна прокрутка не знадобиться.
box-sizingoverflow працює з фактичними межами елемента. На них впливають width, height, padding і border.
Без box-sizing: border-box задані width і height визначають лише область вмісту:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 4px solid black;
}Фактичний розмір такого блока буде більшим за 200 × 100 пікселів. Часто зручно використовувати:
* {
box-sizing: border-box;
}Тоді width і height включатимуть внутрішні відступи та межі, а поведінку переповнення легше передбачити.
overflow: hidden обрізає не лише текст, а й дочірні елементи, псевдоелементи та декоративні частини, які виходять за межі блока.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}У цьому прикладі overflow: hidden не дозволяє зображенню вийти за круглі межі .avatar.
hidden для важливого вмістуЯкщо приховати текст за допомогою overflow: hidden, користувач може не отримати доступу до його частини.
Для великого тексту частіше краще використовувати:
.article {
max-height: 300px;
overflow-y: auto;
}Такий код може не створити вертикальну прокрутку:
.panel {
overflow-y: auto;
}Якщо .panel не має обмеженої висоти, він просто збільшиться за висотою вмісту. Потрібно встановити height або max-height:
.panel {
max-height: 300px;
overflow-y: auto;
}overflow: hidden і text-overflowoverflow: hidden лише обрізає вміст. Три крапки з’являться тільки разом із text-overflow: ellipsis, а для одного рядка також потрібен white-space: nowrap.
Глобальне правило:
body {
overflow-x: hidden;
}може приховати частину інтерфейсу або ускладнити взаємодію з ним. Спочатку варто знайти елемент, який спричиняє переповнення, і виправити його розміри або власний overflow.
У скороченому записі:
.element {
overflow: auto hidden;
}перше значення стосується горизонтальної осі, а друге — вертикальної. Якщо потрібне вертикальне прокручування та обрізання по горизонталі, треба написати:
.element {
overflow: hidden auto;
}overflow керує вмістом, який виходить за межі блока.
visible залишає переповнення видимим.
hidden обрізає переповнення без смуг прокручування.
scroll додає смуги прокручування.
auto додає їх лише за потреби.
clip обрізає вміст без призначення для прокручування.
overflow-x керує горизонтальною віссю, а overflow-y — вертикальною.
Два значення overflow задаються в порядку: горизонтальне, потім вертикальне.
Для прокручування контейнер зазвичай повинен мати обмежену ширину або висоту.
Для тексту з трикрапкою потрібна комбінація overflow, white-space і text-overflow.