overflow hidden что это и почему обрезка не работает

Ищете ответ на вопрос «overflow hidden что это»? Это свойство CSS управляет содержимым, которое выходит за границы блока. Выберите hidden для обрезки, auto для прокрутки по необходимости, scroll для постоянных полос или clip для жесткой обрезки без прокрутки. В статье есть примеры CSS, настройка осей, многоточие и решения для случая, когда overflow hidden не работает.

Значения свойства overflow

Сначала определите, нужен ли пользователю доступ к скрытому содержимому. Декоративные элементы можно обрезать, длинный текст лучше прокручивать или переносить.

Таблица описывает обычный блочный контейнер с одинаковыми значениями по осям. Видимость полос также зависит от настроек операционной системы.

Значение по умолчанию – visible. Глобальные ключевые слова initial и inherit тоже применимы: первое возвращает исходное значение свойства, второе берет значение у родительского элемента.

Два значения задают оси по порядку: overflow: hidden auto обрезает переполнение по горизонтали и включает вертикальную прокрутку при переполнении.

visible

Содержимое остается видимым за границами элемента при overflow: visible. Переполнение не меняет размеры блока и может перекрыть соседние элементы.

<div id="box">
    Длинный текст выходит за границы блока.
</div>

#box {
    width: 200px;
    height: 100px;
    background-color: #FD2D0F;
    overflow: visible;
}

Ширина блока равна 200px, а высота – 100px. Если текст не помещается, браузер показывает его за пределами красного фона.

overflow hidden css: обрезка содержимого

Браузер обрезает содержимое блока, которому вы задали overflow: hidden. Блок также создает новый блочный контекст форматирования. Такой контекст удерживает внутренние элементы с float и предотвращает схлопывание отступов контейнера с отступами его дочерних блоков.

Скрытое содержимое можно прокрутить скриптом, например через изменение scrollTop или вызов прокрутки элемента. Полосы прокрутки при этом не показываются пользователю.

.box {
    width: 240px;
    height: 100px;
    overflow: hidden;
}

clip

Декоративный блок с overflow: clip обрезает содержимое без создания области прокрутки. Скрипт не сможет прокрутить такой элемент, поэтому значение подходит для декоративных деталей и строгого ограничения рисунка.

Чтобы расширить край обрезки, задайте отступ через overflow-clip-margin. Например, изображение может выступить на 12px, хотя остальное переполнение останется обрезанным.

.decorative-box {
    overflow: clip;
    overflow-clip-margin: 12px;
}

clip не создает новый блочный контекст форматирования. Если он нужен, добавьте контейнеру display: flow-root.

scroll

Блок становится прокручиваемым даже без переполнения, если задать overflow: scroll. При классических полосах браузер отводит место под обе оси. Системные настройки могут скрывать полосы до начала прокрутки.

.scroll-box {
    width: 240px;
    height: 100px;
    overflow: scroll;
}

Появление классической полосы может менять ширину текста и сдвигать макет. Чтобы заранее зарезервировать место под нее, добавьте scrollbar-gutter: stable при overflow: auto. На полосы, которые накладываются поверх содержимого, резервирование не влияет.

.scroll-box {
    overflow: auto;
    scrollbar-gutter: stable;
}

В старом коде встречается overflow: overlay – устаревший псевдоним auto. Для новых стилей используйте auto.

auto

Браузер добавляет прокрутку только при переполнении блока с overflow: auto. Это базовый выбор для панели, списка или карточки с неизвестным объемом содержимого.

.auto-box {
    width: 240px;
    height: 100px;
    overflow: auto;
}

Если текст превышает высоту блока, появляется вертикальная прокрутка. При коротком тексте блок остается без лишних полос.

overflow x hidden и overflow y scroll: настройка осей

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

<div class="table-wrap">
    <table>...</table>
</div>

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

Если одна ось получает visible, а другая – hidden, scroll или auto, браузер вычисляет visible как auto. Поэтому попытка оставить вертикальное переполнение видимым может неожиданно добавить вертикальную прокрутку.

При ширине внешнего блока 200px и ширине дочернего блока 250px горизонтальная прокрутка появляется так:

#box {
    width: 200px;
    overflow-x: auto;
    overflow-y: hidden;
}

#inner_box {
    width: 250px;
}

Для вертикальной прокрутки задайте ограничение высоты и значение auto по оси Y:

#box {
    height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
}

#inner_box {
    height: 150px;
}

css text overflow: многоточие в конце строки

Добавьте text-overflow: ellipsis, чтобы браузер обозначил конец обрезанной строки многоточием. Чтобы пример работал, запретите переносы через white-space: nowrap и скройте переполнение через overflow: hidden.

.title {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Элементу нужна ограниченная ширина или другое ограничение размера. Без него текст не переполнит блок, и многоточие не появится.

Для многострочного текста используйте свойство -webkit-line-clamp вместе с display: -webkit-box и вертикальной ориентацией:

.description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

В этом примере браузер показывает до трех строк, а остальной текст скрывает.

Разбивка длинного текста

Длинное слово или URL может растянуть строку и вызвать горизонтальную прокрутку. Свойство overflow-wrap разрешает переносить слово внутри доступной ширины.

#box {
    width: 200px;
    height: 100px;
    overflow-wrap: break-word;
}

Значение break-word переносит слишком длинное слово, когда оно иначе не помещается. В старом коде для этого часто встречается word-wrap – совместимый псевдоним overflow-wrap. В новых стилях используйте основное название overflow-wrap.

Для flex-элементов и ячеек таблицы может понадобиться overflow-wrap: anywhere. Браузер учитывает такие переносы при расчете минимальной ширины содержимого. Чтобы дополнительно разрешить flex-элементу сжиматься, задайте ему min-width: 0.

.cell {
    min-width: 0;
    overflow-wrap: anywhere;
}

Почему overflow hidden не работает

Обрезка зависит от размеров блока, системы координат потомка и выбранного элемента страницы. Проверьте эти причины по очереди.

У блока нет ограниченной ширины или высоты

Блок с автоматической высотой растягивается вместе с текстом, поэтому ему нечего обрезать. Задайте height, max-height, width или max-width.

.card {
    max-height: 180px;
    overflow: hidden;
}

Абсолютный потомок отсчитывается от другого предка

Абсолютно позиционированный элемент обычно отсчитывает координаты от ближайшего позиционированного предка. Контейнер с обрезкой может оказаться между потомком и этим предком. Тогда его overflow: hidden не обрежет абсолютный элемент.

Назначьте контейнеру position: relative, чтобы привязать координаты потомка к нему. После этого выступающая часть потомка попадет под обрезку.

.card {
    position: relative;
    overflow: hidden;
}

.card__image {
    position: absolute;
    inset: 0;
}

overflow hidden мешает position: sticky

Липкий элемент ориентируется на ближайшего предка с механизмом прокрутки. Так браузер определяет его поведение при position: sticky. Обрезка через overflow: hidden создает такой механизм даже без видимых полос. Поэтому липкий элемент может перестать следовать за прокруткой страницы.

Уберите обрезку с предка и перенесите ее на отдельный декоративный блок. Липкий элемент должен остаться вне этого блока.

На body скрыта одна ось, а переполняется html

Горизонтальная прокрутка страницы может сохраниться после добавления body { overflow-x: hidden; }. Если переполнение создает корневой элемент html, задайте правило для него или найдите дочерний элемент, который расширяет страницу.

html {
    overflow-x: hidden;
}

body {
    margin: 0;
}

Лучшее решение – убрать причину переполнения: фиксированную ширину, отрицательный отступ, широкую картинку или элемент с width: 100vw.

Как выбрать значение overflow под задачу

Выбор зависит от того, должен ли пользователь получить доступ к содержимому. Для декоративной обрезки подходит жесткое ограничение, для данных – прокрутка.

Не используйте hidden для важных данных без альтернативного способа просмотра. Пользователь не должен терять текст из-за декоративного ограничения.

Поддержка браузерами

Значения visible, hidden, scroll, auto и свойства overflow-x с overflow-y поддерживаются современными браузерами. Двухзначную запись можно заменить отдельными объявлениями для каждой оси.

Браузер игнорирует значение или свойство, которое он не поддерживает. Для декоративного блока оставьте hidden базовым вариантом, а clip включайте через @supports:

.decoration {
    overflow: hidden;
}

@supports (overflow: clip) {
    .decoration {
        overflow: clip;
        overflow-clip-margin: 12px;
    }
}

Браузер без поддержки clip сохранит обрезку через hidden. Если браузер распознает clip, но игнорирует overflow-clip-margin, дополнительного выступа на 12px не будет. Помните, что запасной вариант hidden создает область прокрутки и блочный контекст форматирования.

Документация MDN по overflow описывает синтаксис свойства и взаимодействие значений по осям.

Совет от нашей редакции: сначала ограничьте размер проблемного блока, затем выберите способ доступа к содержимому. Так overflow исправит переполнение, а не скроет ошибку в макете.