CSS方向属性示例| dir ltr rtl in html网页中显示的文本/内容可以用html和CSS来控制。 HTM

网页中显示的文本/内容可以用html和CSS来控制。

HTML中的dir属性
CSS中的方向属性

html中的dir属性

当某些浏览器不支持css时，这将很有用。它是一个应用于任何html标签的全局属性。

<div dir="rtl"> text content from right to left</div>

所有主要的浏览器都支持这个属性。

CSS中的方向属性

CSS中的方向属性用于改变页面中显示的文本元素的方向。它有两个值：rtl 和ltl ，ltr是默认值。rtl是一种从右到左的语言，ltr是从左到右。

这也可以用来定义页面内容方向，块状文本或表列方向

对于基于英语的网站，这将被用来在网络应用中以从左到右的方向显示页面内容，而对于基于阿拉伯语的网站，则从右到左。

这篇文章讲述了以下内容

语法

css_selector{
direction :rtl/ltr/initial/inherit;
}

方向属性的值是

ltr - 默认，从左到右
rtl - 从右到左
initial - 初始默认值
继承来自父级的值

CSS方向属性rtl ltr的例子

如果CSS属性被声明为ltr，所有显示的元素都会从左到右显示给用户。

下面是一个带和不带方向属性的例子

<!DOCTYPE html>
<html>

<head>

    <style>
        .leftToRight {
            direction: ltr;
        }
        
        .rightToLeft {
            direction: rtl;
        }
    </style>
</head>

<body>
    <h3>CSS Direction Example</h3>
    <hr>
    <p class="leftToRight">This is text placed from left to right</p>
    <p>Default to left to right without direction property</p>

    <p class="rightToLeft">This is text placed from right to left</p>

</body>

</html>

而输出结果是 CSS direction ltr rtl example

阿拉伯文网站的CSS方向属性的方向

阿拉伯网站在网页上的文字方向是由右至左。

这意味着，css方向必须应用于整个html元素，Html标签有dir属性来指定整个文档的文本方向从右到左。

html：

<html dir="rtl" >
<head>
</head>
<body>
    <p>this will be arabic text</p>
</body>
</html>

与css方向属性：

body{
    direction:rtl
}

浏览器支持

CSS中的这个方向和HTMl中的dir属性在所有流行的浏览器中都有支持。

浏览器
Mozilla
内部资源管理器
浏览器
Safari

总结

文本方向可以用CSS方向属性和HTML中的dir属性来控制。

这些都是非常有用的，可以从右到左，反之亦然。