Подкаст CSS – 034: Переполнение
Когда контент выходит за пределы своего родителя, существует множество вариантов того, как с этим справиться. Вы можете прокручивать, чтобы добавить дополнительное пространство, обрезать выходящие за пределы края, указать место обрезки многоточием и многое другое. Переполнение особенно важно учитывать при разработке приложений для телефонов и экранов нескольких размеров.
В CSS есть два разных варианта обрезки; text-overflow
поможет с отдельными строками текста, а свойства overflow
помогут контролировать переполнение в блочной модели.
Переполнение одной строки с помощью text-overflow
Используйте свойство text-overflow
для любого элемента, содержащего текстовые узлы, например абзаца, <p>
. Он определяет, как будет выглядеть текст, если он не помещается в доступное пространство элемента. Весь видимый HTML-текст на странице находится в текстовых узлах . Чтобы использовать text-overflow
вам нужна одна развернутая строка текста, поэтому вы также должны установить для overflow
hidden
и иметь значение white-space
, которое предотвращает перенос.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Использование свойств переполнения
Свойства переполнения устанавливаются для элемента, чтобы контролировать, что происходит, когда его дочерним элементам требуется больше места, чем имеется в наличии. Это может быть намеренно, как в интерактивной карте, такой как Карты Google, где пользователь перемещается по большому изображению, обрезанному до определенного размера. Это также может быть непреднамеренно, как в приложении чата, где пользователь вводит длинное сообщение, которое не помещается в текстовый пузырь.
Вы можете представить переполнение в двух частях. Родительский элемент имеет жестко ограниченное пространство, которое не изменится. Вы можете думать об этом как об окне. Дочерние элементы — это контент, которому требуется больше места от родителя. Вы можете думать об этом как о том, на что вы смотрите в окно. Управление переполнением поможет определить, как окно обрамляет это содержимое.
Прокрутка по вертикальной и горизонтальной оси
Свойство overflow-y
контролирует физическое переполнение по вертикальной оси окна просмотра устройства, следовательно, прокрутку вверх и вниз.
Свойство overflow-x
контролирует переполнение по горизонтальной оси окна просмотра устройства, следовательно, прокрутку влево и вправо.
Логические свойства направления прокрутки
Свойства overflow-inline
и overflow-block
устанавливают переполнение в зависимости от направления документа и режима записи.
Сокращение overflow
Сокращение overflow
устанавливает стили overflow-x
и overflow-y
в одной строке:
overflow: hidden scroll;
Если указаны два ключевых слова, первое применяется к overflow-x
, а второе — к overflow-y
. В противном случае и overflow-x
, и overflow-y
используют одно и то же значение.
Ценности
Давайте подробнее рассмотрим значения и ключевые слова, доступные для свойств overflow
.
-
overflow: visible
(по умолчанию) - Без установки свойства
overflow: visible
будет значением по умолчанию для Интернета. Это гарантирует, что контент никогда не будет непреднамеренно скрыт и соответствует основным принципам «никогда не скрывать контент» или «безопасное расположение точных макетов». -
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
. Например:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
Затем можно использовать CSS, чтобы указать, что блок находится в фокусе, используя свойство outline
чтобы дать визуальную подсказку о том, что теперь его можно будет прокручивать.
В книге «Использование CSS для обеспечения доступности» Адриан Роселли демонстрирует, как CSS может помочь предотвратить ухудшение доступности. Например, включить прокрутку и добавить индикатор фокуса только в том случае, если используются правильные атрибуты. Следующие правила сделают поле прокручиваемым только в том случае, если оно имеет атрибуты tabindex
, aria-labelledby
и role
.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Расположение полосы прокрутки внутри блочной модели
Полосы прокрутки занимают место внутри поля отступа и могут конкурировать за место, если inline
и не overlaid
. Модуль блочной модели подробнее раскрывает этот потенциальный источник изменения макета.
корневой скроллер против неявного скроллера
Вы можете заметить, что некоторые скроллеры имеют функцию обновления при нажатии и другие специальные функции, особенно при разработке для мобильных и гибридных приложений. Такое поведение прокрутки происходит на корневом скроллере. На странице есть только один корневой скроллер. По умолчанию documentElement является корневым скроллером страницы, однако, изменив элемент, который является корневым скроллером, можно применить специальное поведение к скроллерам, отличным от documentElement. Мы называем этот новый скроллер неявным корневым скроллером.
Чтобы создать корневой скроллер, вы можете использовать так называемое продвижение скроллера , позиционируя контейнер как фиксированный, гарантируя, что он покрывает всю область просмотра и имеет z-индекс сверху со скроллером. Здесь можно сравнить корневой скроллер и вложенный неявный скроллер.
поведение прокрутки
scroll-behavior
позволяет вам выбрать управляемую браузером прокрутку элементов. Это позволяет вам указать, как обрабатывается внутристраничная навигация, такая как .scrollTo()
или ссылки.
Это особенно полезно при использовании с параметром «предпочитает уменьшенное движение», чтобы указать поведение прокрутки в зависимости от предпочтений пользователя.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
поведение при чрезмерной прокрутке
Если вы когда-либо достигли конца модального наложения, а затем продолжили прокрутку и страница за наложением переместилась, это цепочка прокрутки или всплеск до родительского контейнера прокрутки. Свойство overscroll-behavior
позволяет предотвратить утечку прокрутки при переполнении в родительский контейнер (так называемая цепочка прокрутки).
Проверьте свое понимание
Проверьте свои знания о переполнении
Переполнение текста и переполнение элемента — это одно и то же?
Свойство overflow
принимает 2 ключевых слова, первое ключевое слово для какой оси?
Какое пространство в блочной модели занимают полосы прокрутки при отображении и встраивании?
Какое свойство вы бы использовали, чтобы уловить дополнительный импульс от прокрутки во вложенном неявном скроллере?
scroll-hint
scroll-padding
overscroll-behavior
scroll-behavior
overscroll-effect
Ресурсы
Переполнение и потеря данных в CSS из журнала Smashing Magazine