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'sdir
attribute)而不是通过直接使用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:
本段文字将按照从右到左的方向进行流动。