css: 目录 ="rtl"VS 样式 ="direction:rtl"

Question

我知道如何在方向为内联时设置样式

<div dir="rtl">foo</div>

div[dir="rtl"]
{
 ....;
}

但是如何设置样式

<div style="direction:rtl">foo</div> ?

两者的行为都符合预期(文本的右“对齐”)，但我需要对内部的某些元素进行更精细的调整( float 、文本对齐...)，并且在第二种情况下我无法正确设置我的规则。

我无法编辑 html。我必须使用 style="direction:rtl"。

Answer 1

在表单和插入的文本上使用 dir="auto" 以便在运行时自动检测所提供内容的方向

<div dir="auto">Hello, world!</div>
<br/>
<div dir="auto">لا إله إلا الله محمد رسول الله</div>
<br/>
<input type="text" dir="auto" value="Hello, world!" > 
<br/><br/>
<input type="text" dir="auto" value="لا إله إلا الله محمد رسول الله" >

JSFIDDLE 演示 https://jsfiddle.net/80k0drsf/