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
|
---
title: word-break
slug: Web/CSS/word-break
tags:
- CSS
translation_of: Web/CSS/word-break
---
<div>{{CSSRef}}</div>
<p>Свойство <a href="/ru/docs/Web/CSS">CSS</a> <strong> <code>word-break</code></strong> определяет, где будет установлен перевод на новую строку в случае превышения текстом границ блока.</p>
<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете помочь в улучшении примеров, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush:css no-line-numbers">/* Значения ключевых слов */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* не включено в стандарт */
/* Глобальные значения */
word-break: inherit;
word-break: initial;
word-break: unset;
</pre>
<p>Свойство <code>word-break</code> определяется одним из описанных ниже ключевых слов.</p>
<h3 class="brush:css" id="Значения">Значения</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Поведение по умолчанию для расстановки перевода строк.</dd>
<dt><code>break-all</code></dt>
<dd>При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).</dd>
<dt><code>keep-all</code></dt>
<dd>Перевод строки не будет испольован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (<code>normal</code>).</dd>
<dt><code>break-word</code> {{Non-standard_Inline}}</dt>
<dd>При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.</dd>
</dl>
<div class="note">
<p><strong>Заметка:</strong> В отличие от <code>word-break: break-word</code> и <code>overflow-wrap: break-word</code> (смотри {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> вставит перевод строки в том месте, где текст будет превышать занимаемый им блок (даже в том случае, когда текст можно перенести по словам).</p>
</div>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">.narrow {
padding: 5px;
border: 1px solid;
display: table;
max-width: 100%;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keepAll {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
</pre>
<p>{{EmbedLiveSample('Примеры', '100%', 600)}}</p>
<h2 id="Спецификации">Спецификации</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', '#word-break-property', 'word-break')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<div class="hidden">Таблица совместимости была сформирована из структурированных данных. Если вы хотите уточнить информацию, пожалуйста, склонируйте репозиторий <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull-реквест.</div>
<p>{{Compat("css.properties.word-break")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("overflow-wrap")}}</li>
</ul>
|
