CSS 如何显示从右到左的文本

CSS（层叠样式表）是一种主要用于样式化和描述HTML文档元素的样式表语言。该编程语言的主要特点之一是可以分离元素和展示，例如层次、颜色等。

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

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

CSS中的对齐方式

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

左对齐 - 文本与左边界对齐。通常用于正文文本，因为这样易于阅读。
右对齐 - 文本与右边界对齐。通常用于标题和标题，因为这样可以创造出更正式的外观。
居中对齐 - 文本在左右边界之间居中对齐。通常用于图像，因为这样可以创造出更平衡的外观。
两端对齐 - 文本与左右边界对齐。通常用于段落，因为这样可以创造出更干净的外观，就像这篇好看的文章。

让我们详细了解这些对齐方式。

居中对齐

在CSS中，居中对齐主要用于将图像居中对齐在页面上。要在CSS中居中对齐一个元素，可以使用margin属性并将值设置为auto。 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从右向左显示文本的不同方法。主要有两种不同的方法可以做到这一点，分别是：

文本对齐方法
文本方向方法

让我们逐一详细讨论它们并附有示例。

文本对齐方法

这种特定方法在语法或应用方法上与上述为了在不同位置对齐内容而讨论的方法几乎相似。用户可以使用这种方法轻松地从右向左显示文本。此外，此方法用于将整个内容根据所需的方向（左、右或居中）与边距对齐显示。对于给定的问题，此语法将是：

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中的text-direction属性定义了文本的方向。它可以用于设置整个文档或文档中的特定元素的文本方向。text-direction属性可以设置为以下四个值之一 −

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中的”direction”属性来设置文本方向。CSS中的”direction”属性定义了文本的方向。它可以设置为”ltr”（从左到右）或”rtl”（从右到左）。”ltr”的语法与”rtl”的语法非常相似。