CSS Overflow: Control Your Website Content Like a Pro

CSS свойство «overflow» задает, как браузер будет обрабатывать содержимое элемента, если оно выходит за границы контейнера.

Значения свойства «overflow» могут быть следующими:

1. visible: Содержимое элемента будет видимо за пределами контейнера. Это значение по умолчанию.

Пример:

css
.container {
  width: 100px;
  height: 100px;
  overflow: visible;
}

2. hidden: Скрыть содержимое, которое выходит за контейнер.

Пример:

css
.container {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

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

Пример:

css
.container {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

4. auto: Браузер автоматически добавляет полосы прокрутки только тогда, когда содержимое выходит за пределы контейнера.

Пример:

css
.container {
  width: 100px;
  height: 100px;
  overflow: auto;
}

Значение «overflow-x» и «overflow-y» используются для определения вертикальной и горизонтальной прокрутки, соответственно.

Например:

css
.container {
  width: 100px;
  height: 100px;
  overflow-x: auto;
  overflow-y: scroll;
}

Это позволит добавить вертикальную полосу прокрутки и горизонтальную полосу прокрутки в зависимости от содержимого внутри контейнера.

В целом, свойство «overflow» может быть очень полезным при работе с элементами, выходящими за пределы контейнера и позволяет добавить необходимый механизм прокрутки, в зависимости от особенностей содержимого.