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
148
149
150
151
152
153
|
---
title: hyphens
slug: Web/CSS/hyphens
translation_of: Web/CSS/hyphens
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>hyphens</code></strong> указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк.</span> Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p>
<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
<p>Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code>, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут <code><a href="/en-US/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
<div class="note">
<p><strong>Примечание:</strong> Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.</p>
</div>
<h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2>
<pre class="brush:css no-line-numbers">/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;
/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;
</pre>
<p>Свойство <code>hyphens</code> задаётся как одно из ключевых значений, выбранного из списка ниже.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>none</code></dt>
<dd>Слова не разрываются при переносе строки, даже если внутри слов указаны точки разрыва. Строки будут переноситься только по пробелам.</dd>
<dt><code>manual</code></dt>
<dd>Слова разрываются при переносе строки только там, где символы внутри слов указывают точки разрыва. Подробнее смотреть ниже {{anch("Предлагаемые возможности разрыва строки")}}.</dd>
<dt><code>auto</code></dt>
<dd><font>Браузер может автоматически разбивать слова в соответствующих точках переноса, следуя любым правилам, которые он выбирает. </font><font>Однако предлагаемые возможности разрыва строки </font>(смотреть {{anch("Предлагаемые возможности разрыва строки")}} ниже) переопределят автоматический выбор точки разрыва, если таковые имеются.</dd>
</dl>
<div class="note">
<p><strong>Примечание:</strong> Поведение параметра <code>auto</code> зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута <code>lang</code>, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.</p>
</div>
<h2 id="Предлагаемые_возможности_разрыва_строки">Предлагаемые возможности разрыва строки</h2>
<p>Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:</p>
<dl>
<dt>U+2010 (HYPHEN)</dt>
<dd><font>«Жёсткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис всё равно отображается.</font></dd>
<dt>U+00AD (SHY)</dt>
<dd>Невидимый <font>«</font>мягкий<font>»</font> перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте <code>&shy;</code> для вставки мягкого дефиса.</dd>
</dl>
<div class="blockIndicator note">
<p>Когда HTML-элемент <code><a href="/en-US/docs/Web/HTML/Element/wbr"><wbr></a></code> приводит к разрыву строки, дефис не добавляется.</p>
</div>
<h2 id="Формальное_определение"><font><font>Формальное определение</font></font></h2>
<p>{{cssinfo}}</p>
<h2 id="Формальный_синтаксис"><font><font>Формальный синтаксис</font></font></h2>
{{csssyntax}}
<h2 id="Примеры"><font><font>Примеры</font></font></h2>
<h3 id="Указание_переносов_текста">Указание переносов текста</h3>
<p><font><font>В этом примере используются три класса, по одному для каждой возможной конфигурации свойства </font></font><code>hyphens</code><font><font>.</font></font></p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><dl>
<dt><code>none</code>: no hyphen; overflow if needed</dt>
<dd lang="en" class="none">An extreme&shy;ly long English word</dd>
<dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
<dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
<dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
<dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
</dl>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">dd {
width: 55px;
border: 1px solid black;
}
dd.none {
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
dd.manual {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual;
}
dd.auto {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
</pre>
<h4 id="Результат"><font><font>Результат</font></font></h4>
<figure>
<p>{{EmbedLiveSample("Указание_переносов_текста", "100%", 490)}}</p>
</figure>
<h2 id="Характеристики"><font><font>Характеристики</font></font></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 Text", "#hyphens-property", "hyphens")}}</td>
<td>{{Spec2("CSS3 Text")}}</td>
<td>Первоначальное определение</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузером"><font><font>Совместимость с браузером</font></font></h2>
<div>
<p>{{Compat("css.properties.hyphens")}}</p>
</div>
<h2 id="Смотрите_также"><font><font>Смотрите также</font></font></h2>
<ul>
<li>{{Cssxref("content")}}</li>
<li>{{cssxref("overflow-wrap")}} (formerly <code>word-wrap</code>)</li>
<li>{{cssxref("word-break")}}</li>
</ul>
|
