Вдовы - CSS-хитрости

Anonim

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

@media print ( p ( widows: 3; ) )

Если абзац не помещается на одной странице целиком, он разбивается везде, где это возможно. Таким образом, отдельные строки абзаца могут появиться на странице до того, как он продолжится на следующей странице. Обычно это нежелательно, поэтому многие текстовые процессоры требуют, чтобы на старой странице оставалось как минимум две строки вместо одной. orphanСвойство действует аналогично. Вы можете присвоить ему положительное число (где 2 по умолчанию) или inherit.

Обратите внимание, что widowsсвойство обычно не влияет на невыгружаемые носители, такие как screen. Однако браузеры, поддерживающие и то, widowsи другое, columnsбудут применять намеченные функции и к столбцам. Кроме того, свойство влияет только на элементы блочного уровня.

Короче говоря, конкретно в CSS:
  • widows= минимальное количество строк в разделенном абзаце на новой странице.
  • orphans= минимальное количество строк в разделенном абзаце на старой странице.
Красные линии - вдовы.

Связанный

  • сирот

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

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

Рабочий стол

Хром Fire Fox IE Край Сафари
25 Нет 8 12 7

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 Нет 4.4 7,0-7,1