方向
警告:如果可能,建议作者避免使用 direction
CSS 属性,而是使用 HTML 的 dir
全局属性。
direction
CSS 属性设置文本、表格列和水平溢出的方向。对于从右到左书写的语言(如希伯来语或阿拉伯语),使用 rtl
;对于从左到右书写的语言(如英语和大多数其他语言),使用 ltr
。
试一试
请注意,文本方向通常在文档内定义(例如,使用 HTML 的 dir
属性),而不是通过直接使用 direction
属性。
该属性设置块级元素的基本文本方向以及 unicode-bidi
属性创建的嵌入的方向。它还设置文本、块级元素的默认对齐方式以及单元格在表格行中流动的方向。
与 HTML 中的 dir
属性不同,direction
属性不会从表格列继承到表格单元格,因为 CSS 继承遵循文档树,而表格单元格位于行内,而不是位于列内。
direction
和 unicode-bidi
属性是两个不受 all
简写属性影响的属性。
语法
css
/* Keyword values */
direction: ltr;
direction: rtl;
/* Global values */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
值
要使 direction
属性对内联元素产生任何影响,unicode-bidi
属性的值必须为 embed
或 override
。
正式定义
正式语法
direction =
ltr |
rtl
示例
设置从右到左方向
下面的示例中有两个文本字符串,它们都使用 direction: rtl
显示。虽然阿拉伯语文本在此设置下正确显示,但英语文本的句号现在位于不寻常的位置。
css
blockquote {
direction: rtl;
width: 300px;
}
html
<blockquote>
<p>This paragraph is in English but incorrectly goes right to left.</p>
<p></p>
</blockquote>
<blockquote>
<p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
<p></p>
</blockquote>
规范
规范 |
---|
CSS 书写模式级别 4 # 方向 |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
unicode-bidi
writing-mode
- HTML 的
dir
全局属性 - 创建垂直表单控件