css - 从右到左(rtl)英文单词在html中显示

Question

问题是这样的，

<p>Hi world</p>

左转:

Hi world

右图:

world Hi

我无法获得此 RTL 显示未使用 css。

我现在尝试了这些 css 属性。

direction: rtl;
unicode-bidi: embed || normal; //same effect, nothing changes.
unicode-bidi: bidi-override; //each letter comes from r-t-l. Like: dlrow iH
text-align: right;

有没有办法使用 css 将文本转换为 world Hi 表单。

谢谢

Answer 1

不，这是不可能的，方向性不适合用于此类操作。

direction 属性，以及它在 HTML 中对应的 dir 属性，设置方向性中性文本的方向性。它不会影响具有很强内在方向性的字符串，即使中间有空格之类的字符介入也是如此。值 bidi-override 意味着它所说的，它只是强制一个单一的书写方向。

你也需要处理文字，因为 CSS 没有可以在这里使用的伪元素，你需要使用真实的元素，比如标记

<p><span class=w>Hi</span> <span class=w>world</span></p>

然后您可以对整个元素和单个单词使用不同的方向性设置:

span { unicode-bidi: embed;}
p { unicode-bidi: bidi-override; direction: rtl;  text-align: left; }