CSS direction 属性 详解
css3基础 2022-07-14 16:04:44小码哥的IT人生shichen
CSS direction 属性
定义和用法
direction 属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
另请参阅：
CSS 教程：CSS 文本
HTML DOM 参考手册：direction 属性
实例
把文本方向设置为“从右向左”：
div
{
direction: rtl;
}
完整实例【亲自试一试】：
<html>
<head>
<style type="text/css">
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
CSS 语法
direction: ltr|rtl|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
更多实例
完整实例【设置文本的方向】：
<html>
<head>
<style type="text/css">
div.one
{
direction: rtl
}
div.two
{
direction: ltr
}
</style>
</head>
<body>
<div class="one">Some text. Right-to-left direction.</div>
<div class="two">Some text. Left-to-right direction.</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
本例演示如何设置文本的方向。
技术细节
| 默认值： | ltr |
|---|---|
| 继承性： | yes |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.direction="rtl" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 2.0 | 5.5 | 1.0 | 1.3 | 9.2 |
