HTML5之dir属性

时间:2023-12-21 13:29:32
  <p style="text-align:center"><bdo dir="RTL">芙蓉楼送辛渐</bdo></p>
<p style="text-align:center"><bdo dir="RTL">王昌龄</bdo></p>
<p style="text-align:center"><bdo dir="RTL">寒雨连江夜入吴,</bdo></p>
<p style="text-align:center"><bdo dir="RTL">平明送客楚山孤。</bdo></p>
<p style="text-align:center"><bdo dir="RTL">洛阳亲友如相问,</bdo></p>
<p style="text-align:center"><bdo dir="RTL">一片冰心在玉壶。</bdo></p>

效果如下:

芙蓉楼送辛渐

王昌龄

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问,

一片冰心在玉壶。

可以看到文字从右到左排序了,明显的这是dir属性的功劳。但是如果dir属性不镶嵌在bdo标签上是不会如此执行的,dir属性可以说和bdo标签相互依存(bdo 元素可覆盖默认的文本方向。)

如果把dir放在了其他标签上效果就变成如下的样子了,例如

 <p dir="rtl">洛阳亲友如相问,一片冰心在玉壶。</p>   

洛阳亲友如相问,一片冰心在玉壶。

效果如上,dir="rtl"得到了有text-align:right和句子从右到左排列的效果,但是句子中文字的排列仍然保留默认的从左往右