HTML - bdo 标签



HTML <bdo> 标签代表双向覆盖。此元素将覆盖当前文本的方向性,从而导致文本以新方向显示。<bdo>标签包含全局属性,其中一个属性是 dir,它是文本在此元素内容中呈现的方向。

语法  


<bdo dir="..">...</bdo>

属性

<bdo>标签支持 HTML 的 全局属性事件属性。一些特定的属性也被接受,这些属性在下面列出:

属性 描述
dir ltr、rtl、auto 定义网站上的文本方向。

<bdo>标签示例

在下面的示例中,我们将看到 <bdo>标签的用法,也会使用内部 css 来设置 <bdo>标签的样式。每个示例都出于不同的目的而显示。

使用<bdo>标签的 dir 属性

在以下示例中,我们将创建一个 HTML 文档,以查看<bdo>标签的 dir 属性的工作原理。


<!DOCTYPE html>
<html>
<body>
	 <p>
			启科普提供了编程的基础技术教程, 介绍了HTML、
			CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
	 </p>
	 <p>
			<bdo dir="rtl">
				启科普提供了编程的基础技术教程, 介绍了HTML、
				CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
			</bdo>
	 </p>
 </body>
</html>

<bdo>标签设置 CSS 样式

让我们看一下下面的例子,我们正在创建一个 HTML 文档,并使用 <bdo> 标签及其属性,以及 CSS 属性来设置 bdo 内容的样式,如下所示 -


<!DOCTYPE html>
<html>
<head>
	 <style>
			bdo {
				 color: green;
				 font-style: italic;
			}
	 </style>
</head>
<body>
	 <p>
			启科普提供了编程的基础技术教程, 介绍了HTML、
			CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
	 </p>
	 <p>
			<bdo>
				 启科普提供了编程的基础技术教程, 介绍了HTML、
			CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
			</bdo>
	 </p>
	 <p>
		 启科普提供了编程的基础技术教程, 介绍了HTML、
			CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
	 </p>
	 <p>
			<bdo dir="rtl">
				 启科普提供了编程的基础技术教程, 介绍了HTML、
			CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。
			</bdo>
	 </p>
 </body>
</html>

支持的浏览器

浏览器 Chrome Edge Firefox Safari Opera
<bdo> Yes Yes Yes Yes Yes