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

Подкаст 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 контролирует переполнение по горизонтальной оси окна просмотра устройства, следовательно, прокрутку влево и вправо.

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

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

  • Хром: не поддерживается.
  • Край: не поддерживается.
  • Фаерфокс: 69.
  • Сафари: не поддерживается.

Источник

Свойства 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-индекс сверху со скроллером. Здесь можно сравнить корневой скроллер и вложенный неявный скроллер.

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

поведение прокрутки

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

  • Хром: 61.
  • Край: 79.
  • Фаерфокс: 36.
  • Сафари: 15.4.

Источник

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

Это особенно полезно при использовании с параметром «предпочитает уменьшенное движение», чтобы указать поведение прокрутки в зависимости от предпочтений пользователя.

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

поведение при чрезмерной прокрутке

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

  • Хром: 63.
  • Край: 18.
  • Фаерфокс: 59.
  • Сафари: 16.

Источник

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

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

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

Переполнение текста и переполнение элемента — это одно и то же?

истинный
Переполнение текста является особенным по сравнению с переполнением элемента.
ЛОЖЬ
Переполнение текста обычно связано с внутренним переполнением, тогда как переполнение элемента связано с переполнением блока.

Свойство overflow принимает 2 ключевых слова, первое ключевое слово для какой оси?

горизонтальный
🎉
вертикальный
Почти всегда при передаче двух сокращенных значений первое является горизонтальным.

Какое пространство в блочной модели занимают полосы прокрутки при отображении и встраивании?

поле содержимого
Попробуйте еще раз!
обивка
Полосы прокрутки в режиме overlay будут перекрывать отступы, а в inline режиме — к отступам.
рамка
Попробуйте еще раз!
поле поля
Попробуйте еще раз!

Какое свойство вы бы использовали, чтобы уловить дополнительный импульс от прокрутки во вложенном неявном скроллере?

scroll-behavior
Попробуйте еще раз!
scroll-hint
Попробуйте еще раз!
overscroll-behavior
Установка для этого свойства значения contain приведет к перехвату прокрутки.
scroll-padding
Попробуйте еще раз!
overscroll-effect
Попробуйте еще раз!

Ресурсы

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