CSS中direction屬性的怪異行為

Question

遇到這種奇怪的行為時，我只是在Codepen上使用CSS並啟用了自動保存模式 ，

這是我的代碼-

 var inner_div = document.querySelector('.inner-div'); var width = inner_div.offsetWidth; if(width > 200) { inner_div.style.fontSize = '20px'; }

 .outer-div { display: flex; height: 3.5em; width: 10%; border: 2px solid #000000a3; margin-left: 200px; align-items: center; border: 1px solid green; direction: rtl; white-space: nowrap; overflow-x: auto; } .inner-div { font-size: 40px; }

 <html> <head> </head> <body> <div class = "outer-div"> <div class = "inner-div"> Hello World </div> </div> </body> </html>

啟用自動保存模式后，每次按鍵時都要檢查是否從右向左追加了文本，但是當我按斜杠（/）或任何算術運算符（+，-，* ），然后將它們首先附加在左側，然后如果下一個按鍵是字母數字，則它將自動將其附加在表達式的右側。 例如，如果我輸入c，然后是b，然后是a，那么它將顯示為'abc'（根據direction: rtl屬性的要求），但是如果我隨后輸入slash（/），則顯示為/ abc，並且然后，如果我輸入任何字母數字字符，例如d，那么它將顯示abc / d。 有人可以解釋一下原因。 謝謝。

Answer 1

我認為Slash具有BiDi（雙向）類。 同樣的事情！ 和其他特殊字符。 它在周圍文本的上下文中應用方向

Answer 2

我無法重現您描述的行為。 direction標記本身不會改變方式

abc

被陳列。 您輸入的不是c ，然后是b和a 。

當你輸入您所描述的行為發生的a ， b ，最后， c 。 如果鍵入RTL字符，例如#x0627;بة -您會看到ا ب ة從右到左出現。 請注意，如果您不指定rtl方向，這也將起作用。 同樣，無論您如何選擇方向，斜線都將出現在左側。

如果將unicode-bidi標記添加到CSS，則可以實現有趣的效果。

CSS中direction屬性的怪異行為

問題描述

2 個解決方案

解決方案1
0 2017-12-08 13:38:27

解決方案2
0 2017-12-09 07:43:16

CSS中direction屬性的怪異行為

問題描述

2 個解決方案

解決方案1 0 2017-12-08 13:38:27

解決方案2 0 2017-12-09 07:43:16

解決方案1
0 2017-12-08 13:38:27

解決方案2
0 2017-12-09 07:43:16