CSS 如何从右到左显示文本

CSS（层叠样式表）是一种样式表语言，主要用于对HTML文档的元素进行样式和描述。这种编程语言的主要特点之一是将元素和表现形式分开，如层次、颜色等。

CSS用于对所有的HTML标签进行样式化，包括文档的正文、标题、段落和其他文本片段。CSS还可以用来对表格元素、网格元素和图像的显示进行样式化。

这两种编程语言的主要区别在于，HTML（超文本标记语言）是一种用来描述网页结构的语言，而CSS（层叠样式表）是一种用来描述用HTML创建的网页样式的语言。

CSS中的对齐方式

有四种主要的对齐方式：左对齐、右对齐、居中对齐和对齐。

Left – 文本与左边距对齐。它通常用于正文，因为它是最容易阅读的。
Right — 文本与右边距对齐。它通常用于标题和题目，因为它创造了一个更正式的外观。
Center — 文本在左右页边距之间居中。它通常用于图像，因为它创造了一个更平衡的外观。
Justify — 文本与左右页边距对齐。它通常用于段落，因为它创造了一个更干净的外观，就像这篇好看的文章。

让我们更好地了解一下这些对齐方式的细节。

居中对齐

在CSS中，居中对齐主要用于将图像置于页面的中心。要在CSS中对一个元素进行居中对齐，你可以使用 margin 属性，并将其值设置为自动。 margin: auto; 将对元素进行居中对齐。

语法

Variable/heading {
   text-align: center;
}

例子

<!DOCTYPE html>
<html>
<head>
   <style>
      .center {
         margin: auto;
         width: 60%;
         border: 5px solid #73AD21;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Center Alignment</h2>
   <p>To horizontally center a block element (like this), use margin: auto;</p>
   <div class="center">
      <p> Hey!!! this is center alignment. </p>
   </div>
</body>
</html>

左对齐和右对齐

在CSS中，左对齐和右对齐有类似的代码。主要的区别是方向的名称发生了变化。

语法

Variable/heading {
   text-align: left;
} 
Variable/heading {
   text-align: right;
}

例子

下面的例子可以帮助我们更好地理解对齐。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         text-align: left;
      }
      h2 {
         text-align: right;
      }
   </style>
</head>
<body>
   <h1>left direction (hey there)</h1>
   <h2>Right direction (hello guys)</h2>
   <p>The two headings above are aligned left and right.</p>
</body>
</html>

在CSS中显示文本的不同方法

现在，让我们看看如何用CSS从右到左显示文本的不同类型的方法。主要有2种不同的方法，即

文本对齐方法
文本方向法

让我们结合实例逐一详细讨论。

文本对齐法

这种特殊的方法或多或少有类似的语法或应用方法，就像上面讨论的在不同地方对齐内容的边距一样。用户可以使用这种方法轻松地从右到左显示文本。此外，这种方法还可以显示整个内容，并按所需的方向对齐，无论它是向左、向右还是向中间靠拢。对于给定的问题，这个语法将是

variable/heading {
   text-align: center;
}

例子

为了更清楚地说明问题，这里有一个例子来简化事情

<!DOCTYPE html>
<html>
<head>
   <style>
      .method_1 {
         -columns: auto; /* Chrome, Safari, Opera */
         -columns: auto; /* Firefox */
            columns: auto;
         text-align: right;
      }
   </style>
</head>
<body>
   <h1>text alignment method</h1>
   <div class="method_1">
      Text is displayed in the right direction by using the text alignment method
   </div>
</body>
</html>

文本方向方法

CSS中的文本方向属性定义了文本的方向。它可以用来为整个文档或文档中的特定元素设置文本方向。文本方向属性可以被设置为以下四个值之一

left-to-right
right-to-left
inherit
initial

语法

CSS中的文本方向可以通过以下语法轻松地以从右到左的方向显示 —

element_selector {
   direction: rtl;
}

例子

下面的代码显示了正常的文本方向（从左到右）和另一个文本方向（从右到左）之间的比较。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: orange;
         text-align: center;
      }
      .rtl {
         direction: rtl;
      }
   </style>
</head>
<body>
   <h1>
      hello everyone!!!
   </h1>
   <h2>
      hey, guys, this is the default direction of the text.
   </h2>
   <p class="rtl">
      Now, the text is from right to left direction.
   </p>
</body>
</html>

我们可以使用CSS中的 “方向 “属性来设置文本方向。CSS中的 “方向 “属性定义了文本方向。它可以被设置为 “ltr”（从左到右）或 “rtl”（从右到左）。ltr “的语法与 “rtl “的语法非常相似。