1.問題:英文字符和數字不能自動換行,文字可以自動換行
之前在做項目的時候,經常會發現一個問題。那就是文字換行的問題。
在我以前的認知里,只要是設置了文字框的寬度,那么文字就可以在超出邊框時自動換行。直到出現讓我不能理解的一幕~~~~~
2.原因:瀏覽器渲染
經查詢,瀏覽器的缺省換行是不會斷開單詞或數字的,”12345678901234567890″字符串中間沒有任何分隔符,所以它認為是一個不可斷開的單詞,因此以不換行處理。字符串”我想回家我想回家”有漢字,詞法解析時認為雙字節字符都可以分開,所以就正確換行如果在字符串中間加一個空格也行,但是逗號不行。
3.解決方法:強制換行
可以設置對象的css屬性:word-wrap:break-word,或者設置word-break:break-all;