aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/orphans
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/web/css/orphans')
-rw-r--r--files/ru/web/css/orphans/index.html117
1 files changed, 117 insertions, 0 deletions
diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html
new file mode 100644
index 0000000000..89b79dc9d2
--- /dev/null
+++ b/files/ru/web/css/orphans/index.html
@@ -0,0 +1,117 @@
+---
+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" name="Syntax">Синтаксис</h2>
+
+<h3 id="Values" name="Values">Значения</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.</dd>
+</dl>
+
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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("Example", 380, 150)}}</p>
+
+<div> </div>
+
+<h2 id="Specifications" name="Specifications">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Спецификация</th>
+ <th scope="col">Статус</th>
+ <th scope="col">Комментарий</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+ <td>{{Spec2('CSS3 Fragmentation')}}</td>
+ <td>Расширяет <code>orphans</code> для применения в любых фрагментах, включая страницы, регионы и столбцы.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+ <td>{{Spec2('CSS2.1')}}</td>
+ <td>Первое определение.</td>
+ </tr>
+ </tbody>
+</table>
+
+<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>