HTML - dir 属性

HTML dir 属性用于控制多语言网站中的文本方向，以确保内容正确对齐。

网页设计师可以通过正确设置 dir 来设计对用户更友好、更易访问的网页，以适应各种书写系统和文化偏好。它可以应用于许多 HTML 元素，以指定文本应从左到右 (ltr) 显示还是从右到左 (rtl) 显示。

语法

<element dir = "ltr | rtl | auto ">

此属性接受语法中提到的任何一个属性。

应用于

大多数 HTML 元素都支持 dir 属性。但是，一些 HTML 元素确实不支持 dir 属性，特别是那些不涉及文本内容或文本方向性不影响其视觉表示的元素。例如 <html>、<head>、<title>、<meta>、<hr>

HTML dir 属性示例

下面的示例将说明 HTML dir 属性，以及我们在哪里以及如何使用此属性！

使用 dir 属性设置默认方向

在以下示例中，我们将创建两个 p 元素，并在其中一个 p 元素上使用 dir="ltr"，它将正常渲染。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p>
      This is a sample Text direction is not set
   </p>
   <p dir="ltr">
      This is a sample Text direction is left to right  set
   </p>
</body>

</html>

从右到左和从左到右方向的内容

在以下示例中，让我们看看 dir 属性的用法，以及当我们使用不同值的 dir 属性时它将如何渲染内容。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="rtl">
      This paragraph is in English but 
      incorrectly goes right to left.
   </p>
   <p dir="ltr">
      This paragraph is in English and 
      correctly goes left to right.
   </p>
   <hr>
   <p>
      هذه الفقرة باللغة العربية 
      ولكن بشكل خاطئ من اليسار إلى اليمين.
   </p>
   <p dir="auto">
      هذه الفقرة باللغة العربية ، لذا
      يجب الانتقال من اليمين إلى اليسار.
   </p>
</body>

</html>

使用 dir 属性设置自动方向

请考虑以下示例，我们将在此示例中将 dir 设置为 auto。这将自动查找最佳方向来渲染文本。

<!DOCTYPE html>
<html>

<head>
   <title>HTML dir attribute</title>
</head>

<body>
   <p dir="auto">
      Tutorialspoint is best for Free Tutorials
   </p>
   
   <p dir="auto">
      لوريم إيبسوم هو ببساطة نص 
      وهمي من صناعة الطباعة
      والتنضيد. لقد كان لوريم إيبسوم
      هو النص الوهمي القياسي في هذه
      الصناعة منذ القرن السادس عشر
   </p>
</body>

</html>

支持的浏览器

属性
dir	4.0	5.5	2.0	3.1	9.6

html_attributes_reference.htm

打印页面