files/zh-cn/web/html/element/wbr/index.html


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

---
title: <wbr>
slug: Web/HTML/Element/wbr
tags:
  - Element
  - HTML
  - HTML text-level semantics
  - Reference
  - Web
translation_of: Web/HTML/Element/wbr
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;wbr&gt;</code> 元素  </strong>— 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/HTML/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>It is an {{Glossary("empty element")}}; it must have a start tag, but 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/HTML/Content_categories#Phrasing_content">phrasing content</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>

<h2 id="属性">属性</h2>

<p>这个元素仅仅包含 <a href="/en-US/docs/HTML/Global_attributes">全局属性</a></p>

<h2 id="Notes">Notes</h2>

<p>在 UTF-8 编码的页面中， <code>&lt;wbr&gt;</code> 表现为 <code>U+200B ZERO-WIDTH SPACE</code> （零宽空格）代码点。特别是，它表现为 Unicode bidi BN 代码点，也就是说，它对 bidi-ordering 没有影响：<code>&lt;</code><code>div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code> 展示 <code>123,456</code> 而不是 <code>456,123</code>，当不拆成的两行时候。</p>

<p>出于相同原因， <code>&lt;wbr&gt;</code>元素不会在换行的地方引入连字符。为了使连字符仅仅在行尾出现，使用连字符软实体 (<code>&amp;shy;</code>) 来代替。</p>

<p>这个元素首先在 Internet Explorer 5.5 中实现，并且在 HTML5 中官方定义。</p>

<h2 id="示例">示例</h2>

<p><em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Yahoo 代码规范</a> </em>推荐 <a class="external" 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 的末尾搞错。</p>

<pre class="brush: html">&lt;p&gt;http://this&lt;wbr&gt;.is&lt;wbr&gt;.a&lt;wbr&gt;.really&lt;wbr&gt;.long&lt;wbr&gt;.example&lt;wbr&gt;.com/With&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("示例")}}</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('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("html.elements.wbr")}}</p>