HTML5: bdi元素

勤奋的程哥

于 2022-03-17 00:02:39 发布

阅读量585

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/hsjajwbsbsjs/article/details/123539343

版权

bdi元素，英文为"Bi-directional Isolation"（隔离），表示一段处于文字方向考虑而与其他内容隔开的文字。这个元素适用于欲显示内容的文字方向未知的情况。在这种情况下，浏览器会自动确定文字方向，这有可能搅乱页面布局。

以从右向左写的阿拉伯文字为例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bdi元素测试</title>
    <style type="text/css">
    </style>
</head>
<body>
<h1>我从أحمد حسين محمد的桌面上发现了这样一张小纸条：</h1>
<p style="color: white;font-size: 30px;width: auto;
padding: 0 14vm; text-indent: 2ch; background: gray;
border: 1px solid transparent; border-radius: 10px 10px 1px 10px;">
    I had build a site yesterday
    <a href="http://cmtheit.com">
        cmtheit:موقع
    </a>
    come on!
</p>
</body>
</html>

我们看看不用bdi元素的效果：
缺少bdi

我们可以发现，在链接的部分有一个冒号位置后面的英文域名部分本来在文档流中的左侧，在浏览器中却渲染到了右侧。

下面我们再手动将阿拉伯文字部分套在bdi元素中：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bdi元素测试</title>
    <style type="text/css">
    </style>
</head>
<body>
<h1>我从أحمد حسين محمد的桌面上发现了这样一张小纸条：</h1>
<p style="color: white;font-size: 30px;width: auto;
padding: 0 14vm; text-indent: 2ch; background: gray;
border: 1px solid transparent; border-radius: 10px 10px 1px 10px;">
    I had build a site yesterday
    <a href="http://cmtheit.com">
    	cmtheit:<bdi>
        	موقع
    	</bdi>
    </a>
    come on!
</p>
</body>
</html>

再看看效果：
有bdi元素
可以看到现在恢复正常了。

类型

短语类型

父元素

任何可以包含短语元素的元素

局部属性

无

子元素

短语元素

勤奋的程哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5: bdi元素

bdi元素，英文为"Bi-directional Isolation"（隔离），表示一段处于文字方向考虑而与其他内容隔开的文字。这个元素适用于欲显示内容的文字方向未知的情况。在这种情况下，浏览器会自动确定文字方向，这有可能搅乱页面布局。以从右向左写的阿拉伯文字为例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>bdi元素测试</title>.
复制链接

扫一扫