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

Question

我正在尝试让其中包含 url 的 span 的行为与从左到右的行为相同。这个跨度有一个周围的容器，上面有方向 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 因为浏览器将任何符号放在文本“末尾”的方式从右到左(左)。如果我把这个跨度作为 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>

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

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>