CSS - Unicode-bidi （文本显示方式）属性_CSS 菜鸟教程

CSS unicode-bidi 属性用于控制双向文本在文档中的显示方式。双向文本包含从左到右（LTR）和从右到左（RTL）文本。

unicode-bidi 属性允许开发人员覆盖浏览器的默认行为，并确保正确显示双向文本。

可能的值

normal − 这是默认值，它指定文本应根据文本本身的固有方向显示。换句话说，它将使用文本中字符的方向来确定它应该如何显示。
embed - 此值用于显式设置元素中文本的方向。当您将 unicode-bidi 设置为嵌入时，您还可以使用 direction 属性来指定文本是应从左到右（ltr）还是从右到左（rtl）显示。
bidi-override − 此值为内联元素创建覆盖。在块元素的情况下，它会覆盖浏览器的双向文本算法，并严格按照 direction 属性将文本流入任何内联子元素。
isolate − 此值将元素与其同级元素隔离开来。
isolate-override − 此值使用 isolate 关键字对周围内容的隔离行为以及 bidi-override 关键字对内部内容的覆盖行为。
plaintext - 防止双向文本（BIDI）算法影响元素内的文本。

适用于

所有定位元素，但某些值对非内联元素没有影响。

DOM 语法

 object.style.unicodeBidi = "normal|embed|bidi-override|isolate|isolate-override|plaintext";

CSS 属性 unicode-bidi 和 direction 是唯一不受 all shorthand 属性影响的属性。

此属性仅由文档类型定义（DTD）设计人员使用。通常不建议网页设计师或类似作者覆盖它。

CSS unicode-bidi - 正常值

以下示例演示如何使用 unicode-bidi： normal，文本按从右到左方向（RTL）的默认顺序排列 -

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: normal;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - normal Value</h2>
	 	<p>The following text is displayed in its default order from right-to-left direction.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - 嵌入值

以下示例演示如何使用 unicode-bidi： embed。此值将文本的方向嵌入到其周围内容中，当方向设置为 rtl 时，文本将以从右到左（RTL）方向显示 -

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: embed;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - embed Value</h2>
	 	<p>The following text is displayed in its default order from right-to-left direction.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - bidi-覆盖值

以下示例演示如何使用 unicode-bidi： bidi-override。此值以相反的顺序显示文本，最右边的字符显示在第一个位置。

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: bidi-override;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - bidi-override Value</h2>
	 	<p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - 隔离值

以下示例演示如何使用 unicode-bidi： isolate。此值用于将双向文本与其周围的文本隔离开来。−

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: isolate;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - isolate Value</h2>
	 	<p>The following text is displayed in its default order from right to left.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - 隔离-覆盖值

以下示例演示如何使用 unicode-bidi： isolate-override。此值用于将双向文本与其周围的文本隔离和覆盖 -

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: isolate-override;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - isolate-override Value</h2>
	 	<p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - 明文值

以下示例演示如何使用 unicode-bidi： plaintext。此值将文本视为纯文本，而不应用任何双向文本算法。−

<html>
<head>
<style>
	 	.box {
	 	 	 direction: rtl;
	 	 	 unicode-bidi: plaintext;
	 	 	 color:red;
	 	}
</style>
</head>
<body>
	 	<h2>CSS unicode-bidi - plaintext Value</h2>
	 	<p>The following text is displayed in its default order from left-to-right direction.</p>
	 	<div class="box">
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. 	
	 	</div>
</body>
</html>

CSS unicode-bidi - 相关属性

以下是与 unicode-bidi 相关的 CSS 属性列表：

属性	值
direction	设置块级元素中文本的方向。

<< CSS - writing-mode （写作模式）属性 CSS - min-content（最小内容）属性 >>