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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
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>
{{csssyntax}}
<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"><p>They say the fishing is excellent at
Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, German rules)</p>
</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('Сравнение_overflow-wrap_word-break_и_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">See also</h2>
<ul>
<li>{{cssxref("word-break")}}</li>
<li>{{cssxref("hyphens")}}</li>
<li>{{cssxref("text-overflow")}}</li>
</ul>
|
