При каком значении свойства overflow содержимое не обрезается

Update compatibility data on GitHub

Легенда

Полная поддержка
 
Полная поддержка

Нет поддержки
 
Нет поддержкиЭкспериментальная. Ожидаемое поведение может измениться в будущем.Экспериментальная. Ожидаемое поведение может измениться в будущем.Смотрите замечания реализации.Смотрите замечания реализации.

Модуль CSS Overflow содержит функции CSS, связанные с обработкой прокручиваемого переполнения, отображаемого на визуальных носителях. CSS использует термин переполнение для описания содержимого блока, которое простирается за пределы одного из его краев, т.е. края области содержимого, поля, границы или отступа.

Управление переполнением

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

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

1. Типы переполнения

Существует два типа переполнения, которое используется браузерами: переполнение эффектов рисования и прокручиваемое переполнение.

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

Прокручиваемое переполнение представляет собой набор элементов, выходящих за пределы области полей блока, для которых должен быть предусмотрен механизм прокрутки (полоса прокрутки, или скроллбар).

2. Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow

Эти свойства определяют, будет ли содержимое блока, включая переполнение любых эффектов рисования, обрезано по краю области полей, и если это так, будет ли этот блок контейнером прокрутки, позволяющим пользователю прокручивать обрезанные части его содержимого. Применяются к блочным, гибким контейнерам и контейнерам-сеткам.

Свойство overflow-x определяет обработку переполнения в горизонтальном направлении (т.е. переполнение с левой и правой сторон блока), а свойство overflow-y определяет обработку переполнения в вертикальном направлении (т.е. переполнение с верхней и нижней сторон блока).

Свойства не наследуются.

Синтаксис

overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-y: auto;
overflow-x: inherit;
overflow-x: initial;

Свойство overflow — сокращенное свойство, которое задает значения overflow-x и overflow-y в указанном порядке. Если второе значение опущено, оно копируется из первого.

Содержимое блочных элементов может переполнять блок в случае, когда для блока явно задана высота и/или ширина. Без указания высоты блок будет растягиваться, чтобы вместить содержимое, кроме случаев, когда для блока задано позиционирование position: absolute; или position: fixed;. Текст может переполнять блок по высоте, изображения — по высоте и ширине.

Синтаксис

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: hidden scroll;
overflow: auto;
overflow: inherit;
overflow: initial;

3. Автоматическое многоточие

3.1. Многоточие при переполнении: свойство text-overflow

Свойство позволяет обрезать строчное содержимое в случае, когда оно не умещается в блок-контейнер, визуально обрезая его или отображая многоточием. Текст может переполниться, например, когда ему запрещается перенос, например, из-за white-space: nowrap или отдельное слово слишком длинное, чтобы уместиться.

Свойство работает только при задании следующих условий: должна быть определена ширина блока-контейнера, элемент должен иметь значения overflow: hidden и white-space: nowrap. Применяется только к блочным контейнерам.

Свойство не наследуется.

Синтаксис

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: initial;
text-overflow: inherit;

По материалам CSS Overflow Module Level 3

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

CSS свойство overflow-block устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

Свойтсво overflow-block отображается на overflow-y или overflow-x в зависимости от режима записи документа.

Синтаксис

/* Значения свойства */
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;

/* Глобальные значения */
overflow-block: inherit;
overflow-block: initial;
overflow-block: unset;

Свойство overflow-block указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

visible
Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.
hidden
При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.
scroll
При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.
auto
Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но все же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формат синтаксиса

visible | hidden | clip | scroll | auto

Примеры

HTML

<ul>
<li><code>overflow-block:hidden</code> — скрывает текст за пределами поля
<div id=»div1″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>

<li><code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
<div id=»div2″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>

<li><code>overflow-block:visible</code> — отображает текст вне поля, если это необходимо
<div id=»div3″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>

<li><code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно <code>scroll</code>
<div id=»div4″>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>

CSS

#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
height: 100px;
}

#div1 { overflow-block: hidden; margin-bottom: 12px;}
#div2 { overflow-block: scroll; margin-bottom: 12px;}
#div3 { overflow-block: visible; margin-bottom: 120px;}
#div4 { overflow-block: auto; margin-bottom: 120px;}

Результат

Спецификации

Совместимость браузера

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение (pull request).

Смотрите также

• Связанные свойства CSS: text-overflow, white-space, overflow, overflow-inline, overflow-x, overflow-y, clip, display
• Логические свойства CSS
• Режимы письма