Свойство CSS orphans
Свойство orphans используется для задания минимального количества строк блочного контейнера, которые могут быть оставлены внизу страницы или колонки.
Сирота — это первая строка абзаца, которая остается одна внизу страницы, а абзац продолжается на следующей странице.
Свойство orphans обычно используется вместе с правилом @media для указания количества сирот, допускаемых в конце страницы. Его также можно использовать в многоколоночных макетах для веб-страниц и цифровых документов. В этом случае оно задает количество строк, допускаемых в конце колонки.
У свойства orphans есть парное свойство: widows, которое задает количество строк, находящихся в начале следующей страницы/колонки.
| Initial Value | 2 |
|---|---|
| Applies to | Block container elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | object.style.orphans = "2"; |
Синтаксис
Синтаксис CSS для orphans
orphans: <integer> | initial | inherit;Пример свойства orphans:
Пример кода CSS для orphans
<!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;
}
.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 {
orphans: 4;
}
</style>
</head>
<body>
<h2>Orphans 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>
<span style="color: #8ebf42; font-weight: bold">Lorem Ipsum is simply 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.</span>
</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>В приведенном примере четыре строки из абзаца, выделенного зеленым, остаются в конце первой колонки.
Значения
| Value | Description |
|---|---|
<integer> | Указывает количество строк, которые могут быть оставлены в конце страницы или колонки. Отрицательные значения недопустимы. |
| initial | Делает так, что свойство использует значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Practice
Что делает свойство 'orphans' в CSS?