1. 程式人生 > >css 英文換行 css(word-wrap/break)使純英文數字自動換行

css 英文換行 css(word-wrap/break)使純英文數字自動換行

並且 斷開 自動換行 英文數字 兩種 強制換行 pan all ane

問題

當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候,在IE和FF中都會撐大容器,不會自動換行並且當數字或者英文中帶有漢字時,會從漢字處換行,而純漢字卻可以自動換行。這個問題如何解決?先來認識一下兩位主角word-wrap和word-break

解決方法

可以在CSS中加入
word-wrap:break-word;
word-break:break-all;

word-wrap用來控制換行
兩種取值:
(1)normal
(2)break-word(此值用來強制換行,內容將在邊界內換行,中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。)

word-break用來控制斷詞


三種取值:
(1)normal
(2)break-all(是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。)
(3)keep-all(是指Chinese, Japanese, and Korean不斷詞,一句話一行,可以用來排列古詩喲~)

css 英文換行 css(word-wrap/break)使純英文數字自動換行