overflow-block

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

Блочное направление зависит от режима письма (свойство writing-mode) и показано в табл. 1 при разных значениях writing-mode.

Табл. 1. Блочное направление
Код CSS Блочная ось Аналог Вид 
div {
  overflow-block: scroll;
}
 Вертикальная 
div {
  overflow-y: scroll;
}
Джеймс
Кук
 
div {
  overflow-block: scroll;
  writing-mode: vertical-rl;
}
 Горизонтальная 
div {
  overflow-x: scroll;
}
Джеймс
Кук
 
div {
  overflow-block: scroll;
  writing-mode: vertical-lr;
}
 Горизонтальная 
div {
  overflow-x: scroll;
}
Джеймс
Кук

Краткая информация

Значение по умолчанию visible
Наследуется Нет
Применяется К блочным элементам, флекс-контейнерам, грид-контейнерам
Анимируется Нет

Синтаксис

overflow-block: visible | hidden | clip | scroll | auto
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
clip
Содержимое, выходящее за пределы блока, обрезается и не отображается. В отличие от hidden, это значение не позволяет программно прокручивать содержимое.
scroll
Всегда добавляется полоса прокрутки.
auto
Полоса прокрутки добавляются только при необходимости.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>overflow-block</title> <style> .logic-block { background: #e7f2fb; /* Цвет фона */ padding: 1em; /* Расстояние от текста до края */ border: 1px solid #4a6792; /* Параметры линий */ margin-block-end: 1rem; /* Расстояние после блока */ block-size: 80px; /* Размер в блочном направлении */ overflow-block: auto; /* Полоса прокрутки при необходимости */ } .logic-block:lang(ja) { writing-mode: vertical-lr; /* Вертикальное написание текста */ text-orientation: upright; /* Вертикальная ориентация чисел */ inline-size: 200px; /* Размер блока */ } </style> </head> <body> <div class="logic-block"> <h2>Руаль Амундсен</h2> <p>Руаль Амундсен был знаменитым норвежским полярным исследователем, первым достигшим Южного полюса в 1911 году.</p> </div> <div class="logic-block" lang="ja"> <h2>ロアール・アムンセン</h2> <p>ロアール・アムンセンは有名なノルウェーの極地探検家であり、 1911年に南極点に到達した最初の人物。</p> </div> </body> </html>

Объектная модель

Объект.style.overflowBlock

Спецификация

Браузеры

4 12 1 7 1 1
1 1 7 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Форматирование