HTML <bdi> 标签

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

定义和用法

<bdi>是 HTML5 中引入的一个专门用于处理双向文本隔离(Bidirectional Isolation)的标签。

<bdi>对于混合方向文本(如同时包含从左到右和从右到左的文本)的显示特别有用。

<bdi>标签能有效解决阿拉伯语、希伯来语等从右向左（RTL）排版的语言，混入在我们的网站中，比如（阿拉伯用户名）

使用实例

接下来用用户名隔离处理实例演示<bdi>标签的用法，来深化您对<bdi>的理解。

实例代码运行代码

复制

<ul id="user-list">
    <li><bdi>John</bdi></li>
    <li><bdi>محمد</bdi></li>
    <li><bdi>张伟</bdi></li>
</ul>

使用<bdi>标签隔离用户名，可以有效解决用户名（阿拉伯语、希伯来语用户）从右向左（RTL）排版的问题。
<bdi>标签会自动让内容按照字符本身的 Unicode 方向属性显示

全局属性

<bdi>标签还支持 HTML 中的全局属性。

事件属性

<bdi>标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示<bdi>元素：

bdi {
    unicode-bidi: isolate;      /* 核心隔离功能 */
    direction: auto;            /* 自动检测内容方向 */
    display: inline;            /* 默认内联元素 */
    text-align: start;          /* 文本对齐跟随方向 */
    white-space: normal;        /* 正常换行行为 */
    line-height: normal;        /* 默认行高 */
    font: inherit;              /* 继承父元素字体 */
    color: inherit;             /* 继承父元素颜色 */
}