如何使用從右到左語言進行內聯元素

我想要獲得一個帶有內部網址的跨度，其行爲與從左到右一樣。這個跨度有一個周圍的容器，它的方向爲rtl，但我想強制這個元素的行爲從左到右。例如： http://jsfiddle.net/p6gab1zy/如何使用從右到左語言進行內聯元素

.rtl { 
 
    direction: rtl; 
 
} 
 

 
.ltr { 
 
    direction: ltr; 
 
}

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

在這個小提琴，你可以看到的是，而不是顯示爲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>

這將解決這個問題，但不幸的是我的項目，這不是一個理想的解決方案。有沒有人有任何其他修補程序，我可以做到這一點，而不會有可能在屏幕上移動這個元素的位置？通過這個我的意思是改變顯示可以上移或下移，如果填充/邊距在元素上，所以這不是我需要的可行解決方案。

來源

2015-09-30 Jason Addleman

您正在尋找的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>

來源

2015-09-30 22:12:32

你是一個救星！ –

要非常小心地使用bidi-override屬性，因爲它意味着從字面上覆蓋默認行爲，這通常是*最常見的*不是您想要的。在大多數情況下，Unicode BiDi算法足以在不需要覆蓋的情況下自動進行這些校正。例如，在這種情況下，W3C建議使用'dir'屬性而不是css規則，該規則可以修正這種情況，而無需重寫。 – mooeypoo

你應該實際使用dir="ltr"和dir="rtl"而不是CSS類;這是W3C推薦的最佳實踐。它確保元素使用美妙的Unicode雙向算法，它非常善於決定如何在多語言方向上顯示這些內容。

試試這個：

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

（我在希伯來語中添加文字顯示，這兩個方向性正常工作）

見jsFiddle。

來源

2017-01-18 09:10:29 mooeypoo

如何使用從右到左語言進行內聯元素

回答

相關問題