css的white-space屬性導致了空格問題——檢視十六進位制發現2020變成了c2a0
今天發現了一個奇怪的問題,從文字編輯器(notepad++)中把一段文字輸入到easyui的textbox文字框(textarea)中,不進行任何的操作,直接再從文字框中把文字拷貝出來貼到文字編譯器中,通過檢視兩次文字的十六進位制,發現空格部分發生了變化。如下圖:
1、文字內容1:(原始文字被容)
2、輸入到easyui的textbox中:
3、從文字框中產貼出來:
初步觀察會發現兩段文字在空格上發生了變化,進一步觀察其十六進位制內容:
4、原始文字的十六進位制:
5、粘貼後的文字十六進位制:
很明顯,空格發生了變化,被轉成了c2a0
經過了半上午的對比,最終發現了一個css屬性: white-space,檢視w3c解釋:
值 | 描述 |
---|---|
normal | 預設。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。 |
nowrap | 文字不會換行,文字會在在同一行上繼續,直到遇到 <br> 標籤為止。 |
pre-wrap | 保留空白符序列,但是正常地進行換行。 |
pre-line | 合併空白符序列,但是保留換行符。 |
inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
預設是normal,當在textarea中加上white-space:pre-wrap 屬性以後,上述問題迎刃而解。