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

Подкаст 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 позволяет предотвратить утечку прокрутки при переполнении в родительский контейнер (так называемая цепочка прокрутки).

Проверьте свое понимание

Проверьте свои знания о переполнении

Ресурсы

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