Макет потока и переполнение

Присвоение элементу фиксированной высоты и ширины, а затем добавление значительного содержимого в блок, создает базовый пример переполнения:

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>
</div>
<p>
  Their names were Stephen and Joseph Montgolfier. They were papermakers by
  trade, and were noted as possessing thoughtful minds and a deep interest in
  all scientific knowledge and new discovery.
</p>
<p>
  Before that night—a memorable night, as it was to prove—hundreds of millions
  of people had watched the rising smoke-wreaths of their fires without drawing
  any special inspiration from the fact.
</p>

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

Содержимое попадает в блок. После заполнения блока оно продолжает переполняться видимым образом, отображая содержимое за пределами блока, потенциально отображая его под последующим содержимым. Свойство, которое контролирует поведение переполнения, — это свойство overflow, у которого начальное значение visible. Именно поэтому мы можем увидеть содержимое переполнения.

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: hidden;
}

Использование значения scroll удерживает содержимое в блоке и добавляет полосы прокрутки для его просмотра. Полосы прокрутки будут добавлены, даже если содержимое помещается в блок.

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: scroll;
}

Использование значения auto отобразит содержимое без полос прокрутки, если оно помещается в блок. Если это не так, будут добавлены полосы прокрутки. Сравнивая следующий пример, вы должны увидеть, что в примере overflow: scroll выше есть горизонтальные и вертикальные полосы прокрутки, хотя требуется только вертикальная прокрутка. В примере auto ниже добавляется только полоса прокрутки в нужном направлении.

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: auto;
}

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

Свойство overflow на самом деле является сокращенной записью для свойств overflow-x и overflow-y. Если вы указываете только одно значение для overflow, это значение используется для обеих осей. Однако вы можете указать оба значения, в этом случае первое используется для overflow-x и, следовательно, для горизонтального направления, а второе для overflow-y и вертикального направления. В приведенном ниже примере я указал только overflow-y: scroll, поэтому мы не получаем нежелательной горизонтальной полосы прокрутки.

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow-y: scroll;
}

В руководстве по режимам написания и макетам потока мы рассмотрели свойства block-size и inline-size, которые более уместны при работе с различными режимами написания, чем привязка макета к физическим размерам экрана. Модуль CSS overflow также включает свойства, относительные к потоку, для переполнения — overflow-block и overflow-inline. Они соответствуют overflow-x и overflow-y, но отображение зависит от режима написания документа.

В модуле CSS overflow есть некоторые свойства, которые могут помочь улучшить внешний вид содержимого в ситуации переполнения.

Свойство text-overflow обрабатывает переполнение текста в направлении ввода. Оно принимает одно из двух значений clip, в котором случае содержимое обрезается при переполнении, это начальное значение и, следовательно, стандартное поведение. У нас также есть ellipsis , которое отображает многоточие, которое может быть заменено лучшим символом для языка или используемого режима написания.

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

.box p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Спецификация Overflow Level 3 (https://www.w3.org/TR/css-overflow-3/) добавляет свойство block-ellipsis (ранее называвшееся block-overflow). Это свойство позволяет добавлять многоточие (или пользовательские строки) при переполнении текста по оси блока, хотя на момент написания этой статьи поддержки браузеров для этого нет.

Это полезно в ситуациях, когда у вас есть список статей, например, и вы отображаете списки в блоках с фиксированной высотой, которые принимают только ограниченное количество текста. Для читателя может быть не очевидно, что есть больше содержимого для перехода, при нажатии на блок или заголовок. Многоточие ясно указывает на то, что есть больше содержимого. Спецификация позволяла бы вставлять строку содержимого или обычное многоточие.

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

• Руководство по переполненному содержимому
• Модуль CSS overflow
• Модуль CSS containment