initial commit

1 files changed, 147 insertions, 0 deletions

diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..7250663fe6
--- /dev/null
+++ b/files/ru/web/css/overflow-wrap/index.html
@@ -0,0 +1,147 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>overflow-wrap</strong></code> применяется к строковым элементам, устанавливая должен ли браузер расставлять переносы строк внутри неразрывной строки, чтобы избежать выхода текста за границы элемента.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите законтребьюить в проект с примерами, пожалуйста, склонируйте  <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул реквест.</p>
+
+<div class="note">
+<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создает перенос только, если целое слово не может быть размещено на своей линии без переполнения</p>
+</div>
+
+<p>Изначально свойство <code>word-wrap</code> не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в <code>overflow-wrap</code> c алиасом <code>word-wrap</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css notranslate">/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p>Свойство <code>overflow-wrap</code> задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>Чтобы избежать <span style="">выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита </span>в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Так же как и со значением <code>anywhere</code>, слова, которые обычно нельзя перенести по слогам, могут быть разбиты в произвольных точках, если нет других допустимых разрывов в строке, но возможность мягкого переноса, представленная разрывом слов не рассматривается, когда вычисляется минимальный контент внутренних размеров.</dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Сравнение_overflow-wrap_word-break_и_hyphens">Сравнение overflow-wrap, word-break, и hyphens</h3>
+
+<p>Этот пример сравнивает результаты применения <code>overflow-wrap</code>, <code>word-break</code>, и <code>hyphens</code>, когда разбивается длинное слово.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;normal&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;word-break&lt;/code&gt;)&lt;/p&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute)&lt;/p&gt;
+&lt;p lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, English rules)&lt;/p&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em class="hyphens"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. (&lt;code&gt;hyphens&lt;/code&gt;, German rules)&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+   width: 13em;
+   margin: 2px;
+   background: gold;
+}
+
+.ow-anywhere {
+   overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+   overflow-wrap: break-word;
+}
+
+.word-break {
+   word-break: break-all;
+}
+
+.hyphens {
+   hyphens: auto;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
+   <td>{{ Spec2('CSS3 Text') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>