html - 将阿拉伯字符（从右到左）与普通英文字符混合使用时出现奇怪的 HTML 显示问题

Question

这是我为演示问题而创建的JsFiddle 。

以下代码的输出似乎是错误的

<pre>
    <div>
        <span>Exchange Rate : 1 AED(د.إ)</span><span> = 1.0 EUR(€)</span>
    </div>
</pre>

如果我将其更改为 2 行，则显示可能是正确的。

<pre>
    <div>
        <span>Exchange Rate : 1 AED(د.إ)</span>
        <br />
        <span> = 1.0 EUR(€)</span>
    </div>
</pre>

希望有好人能解决这个奇怪的问题。如果您可以与我们分享一些背景知识，甚至会更加感激。

Answer 1

好吧，这是 rtl 语言和 rtl 语言的问题

<div>
    <span>Exchange Rate : 1 USD($)</span>
    <span> = 1.0 EUR(€)</span>
</div>
<div>
    <div class="en">Exchange Rate : 1 AED<div class="ar">(د.إ)</div>  = 1.0 EUR(€)</div>
</div>

尝试通过将另一种语言放在单独的元素中来修复它direction:rtl;，在这种情况下我给了display:inline-block;