css властивість orphans
Властивість orphans визначає мінімальну кількість рядків у контейнері, які потрібно залишити у фрагменті перед перервою фрагментації (існує подібна властивість widows, котра діє майже так само, лише вказує кількість рядків, які потрібні залишити у фрагменті після перерви фрагментації).
Загальний термін для переносу вмісту в контейнерах - фрагментація. Сторінки, стовпці та регіони називаються контейнерами фрагментації. Їх також називають фрагментарними.
Кожна фрагментація перериває завершення макета фрагментованої коробки в поточному фрагментарному ланцюзі і призводить до того, що залишковий вміст буде розміщено у наступному фрагменті, у деяких випадках викликаючи створення нового фрагментарного матеріалу, який містить знову ж таки вкладений вміст.
Властивість orphans була спочатку введена у CSS2, щоб допомогти авторам контролювати розриви рядків у друкованих носіях. CSS3 розширює використання цієї властивості для вирішення інших типів функцій макета, таких як макети з декількома стовпцями та регіонами CSS (де вміст з одного або декількох елементів може розміщуватися на одному або декількох рядках).
- Нотатка
-
Якщо значення властивості конфліктує із властивістю
автор: Svitlanawidows, тоwidowsмає пріоритет і враховується замістьorphans.
Синтаксис
orphans: <число>;Властивість orphans може отримувати єдине значення:
| Значення без задання: | 2 |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.orphans = 5; |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 25 | — | 1.3 | 9.2 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 25 | — | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
orphans: 3 забороняє лишати наприкінці колонки чи сторінки менше трьох рядків абзацу (а widows — на початку наступної). Ефект найпомітніший у друці й багатоколонковій верстці: абзац або лишає внизу три рядки, або переїздить цілком.
HTML
<div class="cols">
<p>Перший абзац просто заповнює місце в колонці, щоб наступному не вистачило простору.</p>
<p>Другий абзац достатньо довгий, щоб розірватися між колонками: без orphans унизу міг би лишитися один самотній рядок, а з orphans: 3 — щонайменше три.</p>
</div>CSS
.cols {
columns: 2;
height: 150px;
column-fill: auto;
}
p {
orphans: 3;
widows: 3;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!