Свойство CSS widows

Свойство CSS widows задаёт минимальное количество строк блочного контейнера, которые должны оставаться вверху страницы или колонки.

«Висячая строка» (widow) — это одиночная строка или слово, оказавшееся вверху страницы или колонки.

Это свойство в основном используется в контексте постраничных медиа, например, в правилах @media print или @page.

Свойству widows соответствует связанное свойство: orphans, которое задаёт минимальное количество строк, которые должны оставаться внизу предыдущей страницы или колонки. Иными словами, строки, оставшиеся в конце предыдущей страницы, называются «оборванными» (orphans), а строки, оставшиеся вверху новой страницы, — «висячими» (widows).

INFO

Отрицательные значения недопустимы.

Начальное значение	2
Применяется к	Блочные контейнеры.
Наследуется	Да.
Анимация	Нет.
Версия	CSS2
Синтаксис DOM	object.style.widows = "3";

Синтаксис

Значения CSS widows

css

widows: <integer> | initial | inherit;

Пример свойства widows:

Пример кода CSS widows

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      @media print {
        .text {
          padding: 20px;
          background-color: #fff;
          columns: 10em 3;
          column-gap: 2em;
          text-align: justify;
        }
        .text p {
          widows: 2;
        }
      }
    </style>
  </head>
  <body>
    <h2>Widows property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

note
Свойство widows действует только в постраничных медиа (например, в режиме предпросмотра печати). В примере для демонстрации этого используется @media print.

Значения

Значение	Описание
`<integer>`	Задаёт минимальное количество строк, которые должны оставаться вверху страницы или колонки. Отрицательные значения недопустимы.
initial	Устанавливает для свойства значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Какое утверждение верно о свойстве CSS widows?

Целочисленное значение задаёт количество строк, которые могут остаться в конце страницы или колонки.Это свойство никогда не используется с правилом @media.Свойство widows имеет связанное свойство: orphans.Это анимируемое свойство.

Свойство CSS widows ​

Синтаксис ​

Пример свойства widows: ​

Значения ​

Практика ​

Свойство CSS widows

Синтаксис

Пример свойства widows:

Значения

Практика