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
|
---
title: <wbr>
slug: Web/HTML/Element/wbr
translation_of: Web/HTML/Element/wbr
---
<div>{{HTMLRef}}</div>
<p><strong>Элемент HTML <code><wbr></code></strong> предоставляет возможность переноса слова – позицию в тексте, где браузер может по желанию разбить строку, в противном случае его правила разрыва строки не будут создавать разрыв в этом месте.</p>
<div><strong>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</strong></div>
<p class="hidden"><strong>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.</strong></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">Категории контента</th>
<td><strong><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td>
</tr>
<tr>
<th scope="row"><strong>Разрешённое содержимое</strong></th>
<td><strong>Отсутствует</strong></td>
</tr>
<tr>
<th scope="row">Пропуск тега</th>
<td><strong>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</strong></td>
</tr>
<tr>
<th scope="row">Разрешённые родительские элементы</th>
<td><strong>Любой элемент принимающий <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</strong></td>
</tr>
<tr>
<th scope="row">Разрешённые роли ARIA</th>
<td><strong>Любые</strong></td>
</tr>
<tr>
<th scope="row">DOM-интерфейс</th>
<td><strong>{{domxref("HTMLElement")}}</strong></td>
</tr>
</tbody>
</table>
<h2 id="Атрибуты"><strong>Атрибуты</strong></h2>
<p><strong>Элемент может содержать только <a href="/ru-R/docs/HTML/Global_attributes">глобальные атрибуты</a>.</strong></p>
<h2 id="Примечания"><strong>Примечания</strong></h2>
<p>На страницах в кодировке UTF-8, элемент <code><wbr></code> ведёт себя как кодовое значение <code>U+200B ZERO-WIDTH SPACE</code> (пробел нулевой ширины). В частности, он ведёт себя как кодовое значение Unicode Bidi BN, то есть он не влияет на порядок {{Glossary("bidi")}}-направления (двунаправленного потока) <code><div dir=rtl>123,<wbr>456</div></code>: отображается, если выражение не разбито на две строки, <code>123 456</code> и не <code>456,123</code>.</p>
<p>По той же причине, элемент <code><wbr></code> не вводит дефис в точке разрыва строки. Чтобы дефис отображался только в конце строки, используйте вместо него символ «мягкого дефиса» (<code>&shy;</code>).</p>
<p>Этот элемент был впервые реализован в Internet Explorer 5.5 и был официально определён в HTML5.</p>
<h2 id="Пример"><strong>Пример</strong></h2>
<p><a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Руководство по стилю Yahoo</a> рекомендует <a href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">разбивать URL перед пунктуацией</a>, чтобы не оставлять знаки препинания в конце строки, которые читатель может ошибочно принять за конец URL.<strong> </strong></p>
<pre class="brush: html notranslate"><strong><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> </strong></pre>
<p><strong>{{EmbedLiveSample("Пример")}}</strong></p>
<h2 id="Спецификация"><strong>Спецификация</strong></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col"><strong>Статус</strong></th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '<wbr>')}}</strong></td>
<td><strong>{{Spec2('HTML WHATWG')}}</strong></td>
<td></td>
</tr>
<tr>
<td><strong>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '<wbr>')}}</strong></td>
<td><strong>{{Spec2('HTML5 W3C')}}</strong></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами"><strong>Поддержка браузерами</strong></h2>
<p><strong>{{Compat("html.elements.wbr")}}</strong></p>
<h2 id="Смотрите_также"><strong>Смотрите также</strong></h2>
<ul>
<li><strong>{{cssxref("overflow-wrap")}}</strong></li>
<li><strong>{{cssxref("word-break")}}</strong></li>
<li><strong>{{cssxref("hyphens")}}</strong></li>
</ul>
|
