Переполнение¶

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

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

В CSS есть два варианта обрезки; text-overflow поможет работать с отдельными строками текста, а свойства overflow помогут управлять переполнением в модели блока.

Переполнение отдельных строк с помощью text-overflow¶

Свойство text-overflow используется для любого элемента, содержащего текстовый узел (узлы), например, для абзаца <p>. Оно определяет, как будет выглядеть текст, если он не помещается в свободное пространство элемента. Весь просматриваемый HTML-текст на странице находится в текстовых узлах. Для использования text-overflow необходима одна развернутая строка текста, поэтому необходимо также установить overflow в значение hidden и иметь значение white-space, препятствующее развертыванию.

1
2
3
4
5

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Использование свойств переполнения¶

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

Переполнение можно представить состоящим из двух частей. Родительский элемент имеет жестко ограниченное пространство, которое не изменяется. Это можно представить как окно. Дочерние элементы — это содержимое, которое хочет получить больше пространства от родительского элемента. Это можно представить как то, на что вы смотрите через окно. Управление переполнением поможет определить, как окно обрамляет это содержимое.

Прокрутка по вертикальной и горизонтальной оси¶

Свойство overflow-y управляет физическим переполнением по вертикальной оси области просмотра устройства, то есть прокруткой вверх и вниз.

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

Логические свойства для направления прокрутки¶

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

Сокращенное свойства overflow¶

Сокращение overflow устанавливает оба стиля overflow-x и overflow-y в одной строке:

1

overflow: hidden scroll;

Если указаны два ключевых слова, то первое применяется к overflow-x, а второе — к overflow-y. В противном случае и overflow-x, и overflow-y используют одно и то же значение.

Значения¶

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

overflow: visible (по умолчанию)

Без установки свойства overflow: visible является значением по умолчанию для web. Это гарантирует, что содержимое никогда не будет непреднамеренно скрыто, и соответствует основным принципам "никогда не скрывать содержимое" или "безопасные макеты точных макетов".

overflow: hidden

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

overflow: scroll

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

overflow: clip

Как и в случае с overflow: hidden, содержимое с overflow: clip обрезается до блока подгонки элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную.

overflow: auto

Наконец, наиболее часто используемое значение — overflow: auto. Оно учитывает предпочтения пользователя и при необходимости показывает полосы прокрутки, но по умолчанию скрывает их, а ответственность за прокрутку возлагает на пользователя и браузер.

Прокрутка и переполнение¶

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

Прокрутка и доступность¶

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

Чтобы блок с прокруткой мог принимать фокус, добавьте tabindex="0", имя с атрибутом aria-labelledby и соответствующий атрибут role. Например:

1
2
3
4
5
6
7

<div
    tabindex="0"
    role="region"
    aria-labelledby="id-of-descriptive-text"
>
    content
</div>

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

В статье Using CSS to Enforce Accessibility Адриан Розелли демонстрирует, как CSS может помочь предотвратить регрессии доступности. Например, включать прокрутку и добавлять индикатор фокуса только при использовании правильных атрибутов. Следующие правила сделают блок прокручиваемым, только если он имеет атрибуты tabindex, aria-labelledby и role.

1
2
3
4
5
6
7

[role][aria-labelledby][tabindex] {
    overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
    outline: 0.1em solid blue;
}

Позиционирование полос прокрутки в блоке¶

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

root-scroller vs implicit-scroller¶

Вы можете заметить, что некоторые скроллеры имеют поведение pull-to-refresh и другие специальные поведения, особенно при разработке мобильных и гибридных приложений. Такое поведение скроллера происходит на корневом скроллере. На странице может быть только один корневой скроллер. По умолчанию корневым скроллером страницы является documentElement, однако, изменив, какой элемент является корневым скроллером, можно применить специальное поведение к скроллерам, отличным от documentElement; мы называем этот новый скроллер неявным корневым скроллером.

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

scroll-behavior¶

scroll-behavior позволяет выбрать управляемую браузером прокрутку элементов. Это позволяет указать, как будет обрабатываться внутристраничная навигация типа .scrollTo() или ссылки.

Это особенно полезно, когда используется вместе с prefers-reduced-motion для задания поведения прокрутки в зависимости от предпочтений пользователя.

1
2
3
4
5

@media (prefers-reduced-motion: no-preference) {
    .scroll-view {
        scroll-behavior: auto;
    }
}

overscroll-behavior¶

Если вы когда-нибудь доходили до конца модального оверлея, а затем продолжали прокручивать страницу, и страница за оверлеем перемещалась, это означает, что цепочка прокрутки, или "пузырь", доходит до родительского контейнера прокрутки. Свойство overscroll-behavior позволяет предотвратить перетекание прокрутки в родительский контейнер (так называемую цепочку прокрутки).

Ресурсы¶

Переполнение и потеря данных в CSS из Smashing Magazine

Источник: Overflow

Комментарии