Вдови - CSS-хитрощі

Anonim

З точки зору типографіки, вдова - це останній рядок абзацу, який залишається сам на новій сторінці або в новому стовпці. widowsВластивість в CSS контролює мінімальну кількість рядків абзацу , які можуть впасти на нову сторінку. Ця властивість впливає лише на сторінкові носії, такі як print.

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

Якщо абзац не може вміститися на одній сторінці цілком, його розділяють, де це можливо. Таким чином поодинокі рядки абзацу можуть з’являтися на сторінці, перш ніж він продовжиться на наступній сторінці. Зазвичай це небажано, тому для багатьох текстових процесорів потрібно залишити принаймні два рядки на старій сторінці, а не один. orphanВластивість діє аналогічно. Ви можете дати йому додатне число (де 2 - за замовчуванням) або inherit.

Зверніть увагу, що widowsвластивість, як правило, не впливає на незастосовані носії, такі як screen. Однак браузери, що підтримують і те, widowsі інше columns, застосовуватимуть передбачувану функціональність і до стовпців. Крім того, властивість впливає лише на елементи рівня блоку.

Коротше кажучи, в CSS конкретно:
  • widows= мінімальна кількість рядків у абзаці, розділеному на новій сторінці.
  • orphans= мінімальна кількість рядків у абзаці, розділеному на старій сторінці.
Червоні лінії - вдови.

Пов’язані

  • сироти

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
25 Ні 8 12 7

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

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