direction
CSS属性 direction 用来设置文本、表列水平溢出的方向。rtl表示从右到左(类似希伯来语或阿拉伯语),ltr表示从左到右(类似英语等大部分语言)
示例
/* Keyword values */ direction: ltr; direction: rtl; /* Global values */ direction: inherit; direction: initial; direction: unset;
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
浏览器都支持direction | ||||
语法:
direction :ltr | rtl
取值:
- ltr:文本流从左到右。默认属性。可设置文本和其他元素的默认方向是从左到右。
- rtl:文本流从右到左。可设置文本和其他元素的默认方向是从右到左。
值得注意的是文本方向通常由文档定义(e.g.,withHTML'sdirattribute)而不是通过直接使用direction属性定义。
该属性设置可以设置块级元素文本的基本方向,也可以设置由通过unicode-bidi属性创建的嵌入元素的方向。与此同时,它还可以设置文本、块级元素的默认对齐方式,以及表行中的单元格的流动方向。
与 HTML 中的dir属性不同,direction属性不会从表列继承到表单元格,因为 CSS 继承遵从文档流,而表单元格位于行内部,但不在列内部。
direction属性和unicode-bidi属性不受all属性影响。
| 默认值 | ltr |
| 适用于 | 所有元素 |
| 继承性 | 有 |
| 动画性 | 否 |
| 计算值 | 特定值 |
实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>direction_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test p{width:320px;margin:15px 0;border:1px solid #000;}
.ltr p{direction:ltr;}
.rtl p{direction:rtl;unicode-bidi:bidi-override;}
</style>
</head>
<body>
<ul class="test">
<li class="ltr">
<strong>ltr:</strong>
<p>本段文字将按照从左到右的方向进行流动。</p>
</li>
<li class="rtl">
<strong>rtl:</strong>
<p>本段文字将按照从右到左的方向进行流动。</p>
</li>
</ul>
</body>
</html>
- ltr:
本段文字将按照从左到右的方向进行流动。
- rtl:
本段文字将按照从右到左的方向进行流动。





