一个奇怪的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;