CSS - direction 属性

CSS 的 direction 属性用于控制元素的文本方向，这会影响该元素内文本的布局和阅读顺序。它确保文本和其他内联内容以与预期阅读方向一致的方式显示。

语法

direction: ltr | rtl | initial | inherit;

属性值

值	描述
ltr	将文本方向设置为从左到右。默认值。
rtl	将文本方向设置为从右到左。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Direction 属性示例

以下示例说明了使用不同值的 direction 属性。

从左到右的文本方向

要使文本方向从左到右，我们使用 ltr 值。这是默认值。以下示例中显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS direction property
   </h2>
   <h4>
      left-to-right direction
   </h4>
   <p>
      This is the left-to-right direction of the text.
   </p>
</body>

</html>

从右到左的文本方向

要使文本方向从右到左，我们使用 rtl 值。这是默认值。以下示例中显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         font-size: larger;
         direction: rtl;
      }
   </style>
</head>

<body>
   <h2>
      CSS direction property
   </h2>
   <h4>
      right-to-left direction
   </h4>
   <p>
      This is the right-to-left direction of the text.
   </p>
</body>

</html>

支持的浏览器

属性
direction	2.0	5.5	1.0	1.3	9.2

css_properties_reference.htm

打印页面