---
title: '<bdo>: 双向文本替代元素'
slug: Web/HTML/Element/bdo
translation_of: Web/HTML/Element/bdo
---
<div>{{HTMLRef}}</div>

<div></div>

<p><span class="seoSummary">HTML 双向文本替代元素(<strong><code>&lt;bdo&gt;</code></strong>)改写了文本的方向性, </span>使文本以不同的方向渲染呈现出来<span class="seoSummary">(override可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了Google的整体翻译，取替代替换改写之意)</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>



<p>文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉, 例如).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">内容分类</th>
   <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">流式元素</a>, <a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>, 显式元素.</td>
  </tr>
  <tr>
   <th scope="row">许可内容</th>
   <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>.</td>
  </tr>
  <tr>
   <th scope="row">标记省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">许可父级元素</th>
   <td>接受<a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>的任何元素</td>
  </tr>
  <tr>
   <th scope="row">隐式ARIA角色</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">许可ARIA角色</th>
   <td>任何</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLElement")}}直到Gecko 1.9.2 (包括Firefox 4)为止，Firefox均为此元素实现HTMLSpanElement接口。</td>
  </tr>
 </tbody>
</table>

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

<p>元素属性包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></p>

<dl>
 <dt>{{htmlattrdef("dir")}}</dt>
 <dd>
 <p>    在此元素内容中呈现文本的方向.可能的值是:</p>

 <ul>
  <li>ltr: 指示文本应从左到右的方向.</li>
  <li>rtl: 指示文本应从右到左的方向.</li>
 </ul>
 </dd>
</dl>

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

<pre class="brush: html">&lt;!-- Switch text direction --&gt;
&lt;p&gt;This text will go left to right.&lt;/p&gt;
&lt;p&gt;&lt;bdo dir="rtl"&gt;This text will go right
to left.&lt;/bdo&gt;&lt;/p&gt;
</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="注意">注意</h2>

<p>HTML 4规范未指定此元素的事件。 它们是在XHTML中添加的。 这很可能是疏忽。</p>

<h2 id="规范">规范</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('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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



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

<h2 dir="ltr" id="另参见">另参见</h2>

<ul>
 <li>相关HTML: {{HTMLElement("bdi")}}</li>
</ul>