Используйте overflow-visible , чтобы предотвратить обрезание содержимого внутри элемента. Обратите внимание, что любой контент, выходящий за границы элемента, будет виден.
Эндрю Альфред Технический консультант
Скрытие содержимого, выходящего за пределы
Используйте overflow-hidden , чтобы обрезать любое содержимое внутри элемента, выходящее за границы этого элемента.
Эндрю Альфред Технический консультант
Прокрутка при необходимости
Используйте overflow-auto для добавления полос прокрутки к элементу в случае, если его содержимое выходит за границы этого элемента. В отличие от overflow-scroll , которая всегда показывает полосы прокрутки, эта утилита покажет их только в том случае, если прокрутка необходима.
Эндрю Альфред Технический консультант
Дебра Хьюстон
Аналитик
Джейн Уайт Директор по маркетингу
Рэй Флинт Технический советник
Горизонтальная прокрутка при необходимости
Используйте overflow-x-auto , чтобы при необходимости разрешить горизонтальную прокрутку.
Эндрю
Эмили
Уитни
Дэвид
2in
0 Сара
Вертикальная прокрутка при необходимости
Используйте overflow-y-auto , чтобы разрешить вертикальную прокрутку, если это необходимо.
Эндрю Альфред Технический консультант
Дебра Хьюстон Аналитик
Джейн Уайт Директор по маркетингу
Рэй Флинт Технический советник
Горизонтальная прокрутка всегда
Используйте overflow-x-scroll , чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.
Всегда вертикальная прокрутка
Используйте overflow-y-scroll , чтобы разрешить вертикальную прокрутку и всегда отображать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.
Прокрутка во всех направлениях
Используйте overflow-scroll , чтобы добавить полосы прокрутки к элементу. В отличие от overflow-auto , которая показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.
Применение условно
Наведение курсора, фокус и другие состояния
Tailwind позволяет условно применять служебные классы в различных состояниях, используя модификаторы вариантов.
Например, используйте hover:overflow-scroll , чтобы применять утилиту overflow-scroll только при наведении.
<дел>
Полный список всех доступных модификаторов состояния см. в документации Hover, Focus и других состояний.
Точки останова и медиа-запросы
Вы также можете использовать модификаторы вариантов для таргетинга медиа-запросов, таких как чувствительные точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md:overflow-scroll 9.0008 для применения утилиты
overflow-scroll только при средних размерах экрана и выше.
<дел>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
Новое руководство по переполнению CSS
Как разработчик интерфейса, переполнение — одна из самых неприятных проблем, с которыми вы, вероятно, столкнетесь при создании макета веб-сайта. Переполнение происходит, когда содержимое веб-элемента не соответствует ограничениям его контекста форматирования блока и в конечном итоге выливается наружу:
Родительский элемент будет расширяться, чтобы соответствовать содержимому внутри него по умолчанию, если для его ширины и высоты не указаны фиксированные значения. Когда ширина и высота родительского элемента указываются с фиксированными значениями, используя пиксели или любые другие фиксированные значения CSS, вероятно, произойдет переполнение, когда содержимое внутри элемента увеличится.
Например, в приведенном ниже коде, если контейнер не имеет заданной фиксированной ширины или высоты, браузер уместит содержимое внутри контейнера:
Свойство CSS overflow можно использовать для исправления неработающего макета, вызванного проблемами переполнения, которые часто возникают, когда содержимое данного элемента не соответствует ограничениям его родительского элемента.
Вместо общего обзора CSS overflow в этом руководстве рассматривается каждый из CSS переполняют значения и демонстрируют, как они могут решить проблемы переполнения, которые часто возникают при создании макетов веб-сайтов.
Перейти вперед:
Предпосылки
Каковы значения свойства CSS overflow ?
видимый перелив
скрытый перелив
зажим для перелива
перелив-прокрутка
автоматический перелив
Что такое свойства overflow-x и overflow-y?
Что такое свойство overflow-clip-margin?
Что такое свойство overflow-wrap?
Кроссбраузерная совместимость
Предпосылки
Чтобы следовать примерам и понимать терминологию, используемую в статье, вам необходимо иметь базовые знания CSS.
Каковы значения свойства CSS
overflow ?
9Свойство 0007 overflow имеет набор уникальных значений, которые оно использует для устранения проблем с переполнением в CSS.
Эти значения используются, чтобы либо скрыть, либо обрезать выходящий за пределы контент, используя определенные подходы.
Эти значения включают:
видимый
скрытый
зажим
свиток
авто
переполнение-x , переполнение-y , переполнение-clip-margin и overflow-wrap — это другие свойства, которые могут исправить проблемы с переполнением в CSS, но немного по-другому. Мы узнаем больше об этих свойствах позже в этом руководстве, а сейчас давайте посмотрим, как работают основные значения CSS
overflow и как они используются.
видимое переполнение
overflow-visible — это значение свойства overflow по умолчанию — оно не скрывает и не обрезает выходящее за пределы содержимое элемента; вместо этого он оставляет все как есть.
Каждый элемент имеет это значение overflow , установленное по умолчанию. Если у вас есть элемент с переполненным содержимым, то переполнение элемента будет видно.
Установка видимого значения для элемента равнозначна его полному отсутствию; переполнение видно независимо:
overflow-hidden используется, чтобы скрыть переполнение элемента, обрезая содержимое, чтобы оно соответствовало блоку родительского элемента, и делая переполненное содержимое невидимым. Таким образом, отображается только содержимое, находящееся в границах родительских границ, как показано в следующем примере:
.
<дел>
Lorem ipsum dolor sit amet...
//CSS
. контейнер{
...
переполнение: скрыто;
}
Здесь выходящий за пределы текст элемента абзаца скрыт, но текст, находящийся в границах родительского элемента div , все еще виден.
зажим для перелива
На первый взгляд, overflow-clip работает аналогично скрытому значению ; он также обрезает содержимое, чтобы оно соответствовало родительскому блоку, и скрывает переполняющее содержимое.
Можно утверждать, что значение клипа
является избыточным, поскольку свойство overflow уже имеет значение с таким же вариантом использования. Однако значение клипа на самом деле сильно отличается от скрытого значения .
Значение clip не только скрывает переполнения, но и отключает жесты прокрутки на контейнерах, к которым оно применяется. В результате пользователи не могут использовать колесико мыши для прокрутки скрытого содержимого в таких контейнерах.
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
Однако, в отличие от значения clip
, когда значение hidden применяется к контейнеру, содержимое можно программно прокручивать с помощью свойств и методов JavaScript, таких как scrollLeft и scrollTo() .
В приведенном ниже примере мы видим, что overflow-clip не позволяет нам прокручивать скрытый контент:
See the Pen Overflow-clip by david omotayo (@david4473) на CodePen.
Здесь мы видим, что свойство overflow-hidden можно использовать с scrollLeft , чтобы позволить нам прокручивать скрытое содержимое:
См. Pen Overflow-hidden от david omotayo (@david4473) на CodePen.
Как видите, свойство scrollLeft работает только с контейнером со значением overflow-hidden .
переполнение-прокрутка
переполнение-прокрутка также используется для обрезки переполнения элемента, но, в отличие от hidden и clip , значение scroll добавляет в контейнер полосу прокрутки. Пользователи могут использовать полосу прокрутки для просмотра вырезанного содержимого:
Значение прокрутки может показаться идеальным решением проблемы переполнения, но, к сожалению, оно имеет некоторые проблемы.
При применении к контейнеру значение scroll отображает полосу прокрутки как по оси X, так и по оси Y контейнера, независимо от того, есть ли переполнение. 9Значение 0007 scroll
лучше всего использовать со свойствами overflow-x и overflow-y , как мы увидим позже в этом руководстве.
С другой стороны, браузер имеет тенденцию автоматически добавлять полосы прокрутки в область просмотра, когда элемент перемещается за границы своего родителя, вызывая сдвиг макета.
Эту проблему можно легко устранить, добавив контур к корневому элементу HTML и выделив каждый элемент в разметке. Однако проблема может быть гораздо более обширной и может сохраняться даже после отладки.
Вот подробное руководство о том, как выявлять ошибки, связанные с прокруткой, и предложения по их устранению.
автоматический перелив
overflow-auto аналогичен значению scroll , за исключением того, что полосы прокрутки отображаются только при необходимости, а не по умолчанию. Но, если содержимое контейнера увеличивается и выходит за его границы, значение auto приведет к тому, что полоса прокрутки будет автоматически отображаться на оси, на которой содержимое выходит за пределы, вместо того, чтобы отображать его на обеих осях:
См. Pen Overflow-auto от david omotayo (@david4473) на CodePen.
Если мы попытаемся уменьшить ширину элемента контейнера или добавить больше содержимого в абзац в приведенном выше примере CodePen, полоса прокрутки автоматически отобразится на правой границе контейнера.
Что такое свойства
overflow-x и overflow-y ?
Свойства overflow-x и overflow-y CSS используются для установки поведения переполнения по осям x и y элемента-контейнера.
Эти свойства очень похожи на само свойство overflow . Единственное отличие состоит в том, что их значения применяются только к горизонтальным или вертикальным границам контейнера, а не к обеим осям одновременно.
В приведенном ниже примере к контейнеру применено значение overflow-scroll ; в результате полосы прокрутки отображаются как по оси X, так и по оси Y:
Мы можем контролировать, где полоса прокрутки появляется в контейнере, добавляя -x или -y в свойство overflow (обратите внимание, что мы используем значение прокрутки ), чтобы отобразить его по оси x или оси y соответственно:
<дел>
Lorem ipsum dolor sit amet. ..
//CSS
.контейнер{
...
Переполнение-y: прокрутка;
Или
Переполнение-x: прокрутка;
}
В приведенном ниже примере мы используем overflow-y для отображения полосы прокрутки по вертикальной оси:
В этом примере мы используем overflow-x для отображения полосы прокрутки по горизонтальной оси:
Назначение таких значений, как scroll , – не просто отображать полосы прокрутки, а управлять их отображением.
N.B., если содержимое выходит за пределы обеих осей (т. е. от правой и нижней границ контейнера), полосы прокрутки будут отображаться на обеих осях независимо от используемого свойства overflow
Что такое свойство
overflow-clip-margin ?
overflow-clip-margin — относительно новое свойство CSS. Он используется для управления тем, как значение overflow-clip отсекает переполнение элемента. Это свойство определяет, насколько содержимое элемента может переполниться, прежде чем оно будет обрезано:
Обратите внимание, как мы добавили в контейнер значение overflow-clip вместе со значением overflow-clip-margin . Это связано с тем, что для работы свойства overflow-clip-margin требуется.
Если контейнер не имеет значения overflow-clip , CSS проигнорирует свойство overflow-clip-margin . Вот почему свойство overflow-clip-margin применяется только к той оси, которая обрезается в контейнере. Например, если значение clip применяется к оси X контейнера с помощью overflow-x свойство overflow-clip-margin будет применяться только к оси X.
overflow-clip-margin не имеет специальных значений, таких как свойство overflow . Вместо этого он принимает положительные числовые значения, чтобы указать, насколько далеко будет простираться переполнение от контейнера. Однако у него есть глобальные значения, как и у любого другого свойства CSS:
.
унаследовать
начальный
реверс
снято с охраны
Что такое свойство
overflow-wrap ?
overflow-wrap — это свойство CSS, которое используется для разрыва длинной строки текста, если она выходит за границы целевого элемента-контейнера. Но, в отличие от свойства overflow , overflow-wrap можно применять только к строчным элементам, таким как элементы абзаца и заголовка.
Это свойство сообщает браузеру, что он может разбить строку текста на несколько строк, если она выходит за пределы контейнера. Аналогично свойство overflow , overflow-wrap также имеет набор значений, которые он использует для разрыва текстов:
нормальный : это значение по умолчанию свойства overflow-wrap , оно не будет разрывать текст, когда он переполняет свой контейнер; вместо этого текст будет прерываться в обычных точках разрыва слова
break-word : Это значение разбивает длинную строку текста на несколько строк из допустимых точек останова, если текст выходит за пределы контейнера
в любом месте : Это значение аналогично значению слова прерывания ; однако в любом месте позволяет разрывать длинные строки текста в произвольной точке (даже в середине слова), если их нельзя разорвать в другом приемлемом месте
Вот пример, показывающий overflow-wrap со значением по умолчанию normal :
В этом примере показано overflow-wrap с ключом breakword значение:
Вот тот же пример overflow-wrap , но со значением в любом месте :
Кроссбраузерная совместимость
На момент написания статьи свойства overflow и overflow-wrap и их значения полностью поддерживаются браузерами, что означает, что они очень хорошо поддерживаются в современных браузерах.
Свойство overflow-clip-margin , с другой стороны, указано для работы только с браузерами Chrome, Edge и Opera, но я использовал его с Firefox и обнаружил, что оно работает нормально.
Вы можете попробовать это свойство в выбранном вами браузере и сообщить нам, работает ли оно для вас, в комментариях ниже.
Вот краткая информация о поддержке браузером свойства overflow :
Вот краткая информация о поддержке браузером свойства overflow-wrap :
Вот краткая информация о поддержке браузером свойства overflow-clip-margin :
Заключение
В этом руководстве мы представили CSS overflow , исследовал его значения и рассмотрел, как их использовать для решения проблемы переполнения. Мы также рассмотрели свойства overflow-x , overflow-y , overflow-clip-margin и overflow-wrap и изучили, чем они отличаются от свойства overflow .
Переполнение происходит, когда содержимое веб-элемента не соответствует ограничениям его контекста форматирования блока и в конечном итоге выливается наружу:
контейнер{
...
переполнение: скрыто;
}
Pen 
Pen 
..
Это свойство определяет, насколько содержимое элемента может переполниться, прежде чем оно будет обрезано:
Например, если значение clip применяется к оси X контейнера с помощью 
