CSS свойство widows

❮ Назад Вперед ❯

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

Висячая строка (widow) - это строка (слово), оказавшаяся в начале следующей страницы или колонки.

Это свойство обычно используется вместе с правилом @media.

Есть еще свойство orphans, которое задает количество строк, оставшихся на предыдущей странице/колонки. Т. е. строки текста, оставшиеся на предыдущей странице/колонке, называются orphans, а остальные строки в начале следующей страницы называются widows.

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

Значение по умолчанию	2
Применяется	К элементам блочного контейнера.
Наследуется	Да.
Анимируемое	Нет.
Версия	CSS2
DOM синтаксис	object.style.widows = "3";

Синтаксис

widows: <integer> | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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;
      }
      .text {
      padding: 20px;
      background-color: #fff;
      -moz-columns: 10em 3;
      -webkit-columns: 10em 3;
      columns: 10em 3;
      -webkit-column-gap: 2em;
      -moz-column-gap: 2em;
      column-gap: 2em;
      text-align: justify;
      }
      .text p {
      widows: 2;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства widows</h2>
    <div class="example">
      <div class="text">
        <p>
         Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне...</strong> 
        </p>
        <p>
         Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

        </p>
        <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

        </p>
        <p>
         Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

        </p>
      </div>
    </div>
  </body>
</html>

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

В данном примере строки, выделенные жирным шрифтом, являются висячими строками.

Значения

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