如何为内联元素使用从右到左的语言

Question

我试图让一个内部有 url 的跨度表现得像从左到右。这个跨度有一个周围的容器，上面有方向 rtl，但我想强制这个元素表现为从左到右。例如： http://jsfiddle.net/p6gab1zy/

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>

在此 fiddle 中，您可以看到显示为 /http://www.google.com 而不是 http://www.google.com/，因为浏览器在 "end" 处放置任何符号的方式从右到左（左边）的文本。如果我把这个跨度写成 display: inline-block; (http://jsfiddle.net/p6gab1zy/1/)

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
    display:inline-block;
}

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>

这将解决问题，但不幸的是，对于我的项目来说，这不是一个理想的解决方案。有没有人有我可以做的任何其他修复程序，这些修复程序可以在不改变屏幕上该元素位置的情况下工作？我的意思是，如果 padding/margin 在元素上，则更改显示可以将其向上或向下移动，因此这不是满足我需求的可行解决方案。

Answer 1

您正在查找的 CSS 特征是 unicode-bidi: bidi-override。这会在内联级元素上创建方向覆盖，因此父元素的语言方向将不再有效，因此最终结果将是您要查找的内容。

如果将此覆盖应用到 ltr 元素，您会看到该元素中的文本将正常显示为从左到右。有关 unicode-bidi 和覆盖 the MDN article here 的更多信息。

现场演示：

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
    unicode-bidi: bidi-override;
}

<div class="rtl">
    <span class="ltr">http://www.google.com/</span>
</div>

Answer 2

您实际上应该使用 dir="ltr" 和 dir="rtl" 而不是 CSS 类；这是 W3C 推荐的最佳实践。它确保元素使用出色的 Unicode 双向算法，该算法非常擅长决定如何在多语言方向上下文中显示这些内容。

试试这个：

<div dir="rtl">בדיקה בעברית
  <span dir="ltr">http://www.google.com/</span>
</div>

（我在希伯来语中添加了文本以表明两个方向都正常工作）

参见jsFiddle。

如何为内联元素使用从右到左的语言

How to work with right-to-left languages for inline elements

html

css

right-to-left