CSS свойство widows

Определение и применение

CSS свойство widows(верхняя "висячая" строка) задает минимальное число строк текста, которое располагается на следующей странице при печати документа, когда происходит разрыв страницы внутри элемента (работает при условии, что текст размещается на двух и более страницах).

Попробуйте значения widows

Откройте печать примера (A5). Число задаёт минимум строк абзаца вверху следующей страницы после разрыва. Ограничение зависит от доступного места и может сдвигать разрыв.

Значение свойства

widows: 2

HTML и CSS примера
HTML
<div class="sheet">
  <div class="lead">Вступление</div>
  <p class="demo-target">
    Строка 1 учебного абзаца<br />Строка 2 учебного абзаца<br />Строка 3
    учебного абзаца<br />Строка 4 учебного абзаца<br />Строка 5 учебного
    абзаца<br />Строка 6 учебного абзаца<br />Строка 7 учебного абзаца<br />Строка
    8 учебного абзаца<br />Строка 9 учебного абзаца<br />Строка 10 учебного
    абзаца<br />Строка 11 учебного абзаца<br />Строка 12 учебного абзаца<br />Строка
    13 учебного абзаца<br />Строка 14 учебного абзаца
  </p>
</div>
CSS
body {
  display: block;
  background: white;
  font: 16px/1.5 system-ui;
  color: #172c3d;
}
.sheet {
  max-width: 600px;
  margin: auto;
}
.lead {
  height: 110mm;
  background: #edf2f5;
}
.demo-target {
  background: #fff3d6;
  widows: 2;
}
p {
  margin: 0 0 8px;
}
@page {
  size: A5;
  margin: 15mm;
}
@media print {
  body {
    padding: 0;
    min-height: 0;
    display: block;
  }
  .sheet {
    max-width: none;
  }
}

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

Спецификации: CSS break, CSS multicol

Нет поддержки: Firefox, Firefox Android.

Показать браузеры
Совместимостьcss.properties.widows
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
widows✓25✓12×✓9.2✓1.3✓25×✓14✓1✓1.5✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
widows: <integer [1,∞]>;

/* Глобальные значения */
widows: initial | inherit | unset | revert | revert-layer;

[ ] — группа, а внутри типа — допустимый диапазон; ∞ — отсутствие верхней границы.

JavaScript синтаксис:

JavaScript
element.style.widows = "2";

Начальное значение свойства

2.

Значения свойства

Значения widows
Значение Описание
number Определяет минимальное количество строк, которое может остаться в верхней части новой страницы при печати документа. Отрицательные значения не допускаются, значение 0 не допускается. Начальное значение.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства widows наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Fragmentation — спецификация widows.

Наследуется

Да.

Анимируемое

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

Примеры, попробуйте сами

Строки по сторонам разрыва

Сравните значение 1 и 4. Измените widows во втором варианте. Поддержка разбиения зависит от браузера; пример использует колонки вместо печатных страниц.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.spacer {
    height: 40px;
    background: #e6eff5;
}
p {
    background: #c5dbea;
}

.columns {
    overflow-x: auto;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Строки по сторонам разрыва</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="columns first">
        <div class="spacer"></div>
        <p>
          Строка 1<br />Строка 2<br />Строка 3<br />Строка 4<br />Строка 5<br />Строка 6<br />Строка 7<br />Строка 8
        </p>
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="columns second">
        <div class="spacer"></div>
        <p>
          Строка 1<br />Строка 2<br />Строка 3<br />Строка 4<br />Строка 5<br />Строка 6<br />Строка 7<br />Строка 8
        </p>
      </div>
    </section>
  </body>
</html>
style.css
CSS
.columns {
    column-count: 2;
    column-fill: auto;
    height: 160px;
}
p {
    line-height: 20px;
    margin: 0;
    orphans: 1;
    widows: 1;
}
.second p {
    widows: 4;
}