Давайте посмотрим, как можно предотвратить переполнение CSS?

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

Что такое переполнение?

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

"Когда в поле слишком много содержимого, возникает переполнение".

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

Свойство overflow может принимать следующие возможные значения:

div {
   overflow: visible | hidden | scroll | auto | inherit
}

Видимое переполнение CSS:

Когда содержимое покидает границу своего поля, оно не обрезается. Это значение по умолчанию для этого свойства.

CSS:

.element {
  height: 100px;
  overflow: visible;
}

Скрытое переполнение CSS:

Содержимое, которое переполняется, будет скрыто.

CSS:

.element {
  height: 100px;
  overflow: hidden;
}

Прокрутка:

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

Независимо от того, является ли содержимое длинным или коротким, полоса прокрутки всегда видна.

CSS-код:

.element {
   height: 100px;
   overflow: scroll;
}

Авто:

Содержимое длинное Содержимое длинное Содержимое короткое
Полоса прокрутки видна Полоса прокрутки видна Полоса прокрутки не видна

CSS-код:

.element {
    height: 100px;
    overflow: auto;
}

Исходное: отображает значение по умолчанию, когда отображается.

Наследовать: значение родительского элемента устанавливается как переполнение.

В Bigscal Technologies вы можете Нанять Frontend-разработчиков, Нанять выделенных разработчиков и сэкономить до 60% затрат и времени без платы за найм.

Эта статья была впервые опубликована Сону Рана здесь.

Продолжить чтение для более интересных статей нажав здесь.