files/ru/web/css/orphans/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

---
title: orphans
slug: Web/CSS/orphans
tags:
  - Вёрстка
  - печать
  - разрыв страницы
  - фрагментация
translation_of: Web/CSS/orphans
---
<div>{{CSSRef}}</div>

<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>orphans</code> устанавливает <em>минимальное</em> число строк в блочном контейнере, которое должно быть показано <em>внизу</em> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">страницы</a>, региона или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Columns">столбца</a>.</p>

<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* &lt;integer&gt; значения */</span>
<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span>
<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>

<span class="comment token">/* Глобальные значения */</span>
<span class="property token">orphans</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
<span class="property token">orphans</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span>
<span class="property token">orphans</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre>

<div class="note">
<p>В типографии, <em>orphan</em> это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)</p>
</div>

<p>{{cssinfo}}</p>

<p> </p>

<h2 id="Syntax">Синтаксис</h2>

<h3 id="Values">Значения</h3>

<dl>
 <dt>{{cssxref("&lt;integer&gt;")}}</dt>
 <dd>Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.</dd>
</dl>

<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Пример">Пример</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the first paragraph containing some text.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>This is the third paragraph. It has a little bit more text than the first one.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight[5] line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8cffa0</span><span class="punctuation token">;</span>
  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span>
  <span class="property token">columns</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
  <span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">p</span> <span class="punctuation token">{</span>
  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8ca0ff</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">p<span class="pseudo-class token">:first-child</span></span> <span class="punctuation token">{</span>
  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<pre class="brush: css; highlight[5] line-numbers language-css"> </pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример", 380, 150)}}</p>

<div> </div>

<h2 id="Specifications">Спецификации</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<div>


<p>{{Compat("css.properties.orphans")}}</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{cssxref("widows")}}</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">Paged media</a></li>
</ul>