Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
124 lines (102 loc) · 3.84 KB
/
Copy pathindex.md
File metadata and controls
124 lines (102 loc) · 3.84 KB
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
---
title: "`<wbr>` HTML line break opportunity element"
short-title: <wbr>
slug: Web/HTML/Reference/Elements/wbr
page-type: html-element
browser-compat: html.elements.wbr
sidebar: htmlsidebar
---
The **`<wbr>`** [HTML](/en-US/docs/Web/HTML) element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
{{InteractiveExample("HTML Demo: <wbr>", "tabbed-shorter")}}
```html interactive-example
<div id="example-paragraphs">
<p>Fernstraßenbauprivatfinanzierungsgesetz</p>
<p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
<p>Fernstraßen­bau­privat­finanzierungs­gesetz</p>
</div>
```
```css interactive-example
#example-paragraphs {
background-color: white;
overflow: hidden;
resize: horizontal;
width: 9rem;
border: 2px dashed #999999;
}
```
## Attributes
This element only includes the [global attributes](/en-US/docs/Web/HTML/Reference/Global_attributes).
## Notes
`<wbr>` behaves like the `U+200B ZERO-WIDTH SPACE` code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on {{Glossary("bidi")}}-ordering: `<div dir=rtl>123,<wbr>456</div>` displays, when not broken on two lines, `123,456` and not `456,123`.
For the same reason, the `<wbr>` element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (`­`) instead.
## Examples
_[The Yahoo Style Guide](https://web.archive.org/web/20121014054923/http://styleguide.yahoo.com/)_ recommends [breaking a URL _before_ punctuation](https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses), to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.
```html
<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>
```
### Result
{{EmbedLiveSample("Example")}}
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Guides/Content_categories"
>Content categories</a
>
</th>
<td>
<a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content"
>Flow content</a
>,
<a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content"
>phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>Empty</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>Must have a start tag and must not have an end tag.</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>
Any element that accepts
<a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content"
>phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<a href="https://w3c.github.io/html-aria/#dfn-no-corresponding-role"
>No corresponding role</a
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("overflow-wrap")}}
- {{cssxref("word-break")}}
- {{cssxref("hyphens")}}
- The {{HTMLElement("br")}} element