8

我正在实现一个 RTL 接口。所有组件和文本都是 RTL，但数字是 LTR。

我使用<span dir="ltr">元素将 LTR 文本插入到主要 RTL 文本中。

它适用于大多数情况，但不适用于<option>元素：

<div dir="rtl">
  <select>
    <option>One amount <span dir="ltr">15.000</span> coins</option>
    <option>Other amount <span dir="ltr">19،000</span> coins</option>
  </select>
</div>

它不工作。

这里有一个 JSfiddle 可以玩：https ://jsfiddle.net/fguillen/2hngzv3d/

4

2 回答 2

8

一开始，我认为这是一个错误（与unicode-bidi: bidi-override. 这给了我足够的证据证明这是一种正常的行为。我四处张望，发现出了什么问题。

<option>标签_

这个option标签有点特别。从 Mozilla < option > 文档中，它声明您只能在其中写入文本。这意味着您在标签内写入的任何标签<option>，都会被浏览器解析器忽略，这正是您的<span>标签被忽略的原因。从 Firefox DOM 检查器中查看下图。还值得一提的是，智能手机在微调器而不是组合框中显示选择选项（当然你可以覆盖它）。<option>这意味着在标签中包含除文本之外的任何东西真的毫无意义。

在此处输入图像描述

了解unicode-bidi属性

默认情况下，RTL 文本足够智能，可以通过应用Unicode 双向算法来处理嵌入的 LTR 文本。如果您使用双向覆盖覆盖算法，您将负责处理 RTL 文本中的任何 LTR 文本。

这意味着在元素内部，重新排序是严格按照方向属性进行的；双向算法的隐含部分被忽略。-（Mozilla 文档）

现在，在您的情况下，您不能放置<span>内部<option>，因为它是无效的 HTML，也不能使用&LRM;字符，因为您禁用了双向算法。

解决方案

我能想到的唯一解决方案是

  • 第 1 步：删除双向覆盖。
  • 第 2 步：使用 RTL 文本而不是英文文本。

看到这个提琴手：https ://jsfiddle.net/61dvmsnn/

故事的道德启示

除非您尝试创建镜像效果，否则切勿使用双向覆盖。永远不要禁用双向算法。此外，在 RTL 元素内部进行测试时，请始终使用 RTL 文本（例如阿拉伯语、希伯来语、波斯语...）。让双向算法发挥它的魔力。

于 2016-02-18T20:17:03.483 回答
2

您必须display:inline-block;像这样使用该属性：

<span style="display:inline-block !important; direction:ltr !important; text-align:left !important;">content</span>
于 2018-03-03T20:23:51.277 回答