固定寬度的DIV中英文不能自動換行

2021-06-19 10:52:09 字數 585 閱讀 7485

在乙個設定好寬度的div中,當我們輸入的中文文字長度超過了設定寬度時,會自動換到下一行。但是,如果輸入的是英文本母,那麼,無論你div設定寬度為多少,英文本母都是不換行直接在同一行輸出,導致div的寬度遠遠超出設定的大小。

原因:英文本母之間沒有空格的話,它會預設認為這是乙個英文單詞,所以單詞就一次輸出不換行。

吖真老中醫處方:

word-break:break-all;

word-wrap:break-word;

兩者區別:

1、word-break:break-all

內容到達固

定寬度處會自動換行,如果該行末端有個英文單詞很長,則把單詞截斷。對ff無效。

2、word-wrap:break-word

如果該 a行 末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行 b行 ,而不會在 a行 把單詞截斷。若 b行 整行都不夠乙個單詞寬,則將單詞截斷以對齊。對ff、ie有效。

優缺點:

word-break:break-all能很好的讓文字對齊,顯得整潔,但是100%切斷單詞,易讀性降低

word-wrap:break-word比較人性化,但行末會參差不齊

div中英文無法自動換行的解決辦法

在乙個設定好寬度的div中,當我們輸入的中文文字長度超過了設定寬度時,會自動換到下一行。但是,如果輸入的是英文本母,那麼,無論你div設定寬度為多少,英文本母都是不換行直接在同一行輸出,導致div的寬度遠遠超出設定的大小。原因 這是因為div中,英文本母之間沒有空格的話,它會預設認為這是乙個英文單詞...

中英文混排,遇到中英文交界處自動換行。

設定多行文字的時候,有時文字不貼邊顯示,不會鋪滿文字框。懷疑是wordwrap屬性的問題。使用另一種方式解決。呼叫該方法前,需要設定好文字框字型,寬度,文字內容 param tf param content param tw public static function adjustwordwrap...

TABLE自動換行 支援中英文

數字和英文的時候,table中的td就會被拉長.解決方法是新增 用 做網頁排版的時候,一般都能正常使用。偏偏有時會碰到一段連續的英文詞或者一堆感嘆號 把網頁就撐開的現象。總結了一下,只要在css中定義了如下句子,可保網頁不會再被撐開了。table td word break break all wo...