具有rtl方向的pre元素中的後綴空白的奇怪行爲？

我正在使用從右到左方向和左對齊文本的pre元素。具有rtl方向的pre元素中的後綴空白的奇怪行爲？

我這樣做是因爲我需要一個長的字符串左對齊，在一行，我也需要它在左邊而不是右邊溢出。

我遇到過的唯一問題是，出於某種原因，出現在文本字符串末尾的任何空白都顯示在文本的開頭，即使我可以在開發中看到窗口，白色空間顯然是在結束。

這究竟是爲什麼？有沒有辦法獲得這種相同的對齊行爲，但是在文本的正確一側出現尾隨空白？

我做了一個小提琴來演示這個問題。

CSS：

pre { 
    text-align: left; 
    direction: rtl; 
    border: 1px solid black; /* For demonstration purposes only */ 
}

的JavaScript：

function addWhiteSpace() { 
    document.getElementById("pre").innerHTML += " "; 
} 

function addLetter() { 
    document.getElementById("pre").innerHTML += "a"; 
}

HTML：

<pre id="pre">ewafhioewiafihewiahfihewahiofdsfdsfdsfewaihofeihwofdsfdsfdsfdsasdfdsfdsf</pre> 
<input type="button" onclick="addWhiteSpace();" value="Add White Space" /> 
<input type="button" onclick="addLetter();" value="Add Letter" />

如果單擊「添加空白」，然後選擇「添加信「bu通過你可以看到我描述的行爲。

來源

2015-08-03 Wall_Dough

您也會遇到許多不同字符（如逗號和句點）的相同行爲。

我看到你的不同尋常的問題，有兩種解決方案：

1）前插每一個空間和字符的字符串，並添加一個CSS樣式：

unicode-bidi: bidi-override;

它使rtl行爲一致，但也（驚喜），反轉你的內聯內容。因此，新內容的預先登記。

2）什麼應該滿足您的需求是如何，隨着新的文本輸入，行爲輸入html元素。它將文本對齊到左側。它也溢出到左邊。你拿走邊框和閃爍的光標，沒有人注意到它與普通容器不同。

來源

2015-08-03 13:56:45 wiktus239

哦，是的，輸入元素的行爲完全是我想要的！不知道爲什麼我沒有想到僅僅通過偷偷摸摸的輸入元素來尋找並按我需要的方式工作。謝謝！ –

爲了實現我想要的，實質上是模擬輸入元素而不實際使用輸入元素作爲文本輸入，我將輸入元素設置爲'readonly'，將顯示文本輸入到'value'屬性中，並且設置'screen.scrollLeft'等於'screen.scrollWidth'。它看起來像是一個迂迴的方法，但它完全符合我需要它在三行JavaScript，四行CSS和一些額外的HTML屬性中完成的工作。 –

具有rtl方向的pre元素中的後綴空白的奇怪行爲？

回答

相關問題