利用CSS實現純英文數字自動換行
來源：懂視網
責編：小OO
時間：2020-11-27 18:48:25
利用CSS實現純英文數字自動換行
當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候，在IE和FF中都會撐大容器，不會自動換行。并且當數字或者英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行。這個問題如何解決？先來認識一下兩位主角word-wrap和word-break。word-wrap用來控制css換行。兩種取值。(1) normal。(2) break-word（此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。）。word-break用來控制斷詞。三種取值。(1)normal；(2)break-all（是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）。
導讀當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候，在IE和FF中都會撐大容器，不會自動換行。并且當數字或者英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行。這個問題如何解決？先來認識一下兩位主角word-wrap和word-break。word-wrap用來控制css換行。兩種取值。(1) normal。(2) break-word（此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。）。word-break用來控制斷詞。三種取值。(1)normal；(2)break-all（是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）。
下面為大家帶來一篇CSS代碼使純英文數字自動換行的簡單實現。內容挺不錯的，現在就分享給大家，也給大家做個參考。
當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候，在IE和FF中都會撐大容器，不會自動換行
并且當數字或者英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行。這個問題如何解決？先來認識一下兩位主角word-wrap和word-break
word-wrap用來控制css換行
兩種取值：
(1) normal
(2) break-word（此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。）
word-break用來控制斷詞
三種取值：
(1)normal
(2)break-all（是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）
(3)keep-all（是指Chinese, Japanese, and Korean不斷詞，一句話一行，可以用來排列古詩喲~）
【解決方法】
可以在CSS中加入
word-wrap:break-word;
word-break:break-all;
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
利用CSS實現純英文數字自動換行
當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候，在IE和FF中都會撐大容器，不會自動換行。并且當數字或者英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行。這個問題如何解決？先來認識一下兩位主角word-wrap和word-break。word-wrap用來控制css換行。兩種取值。(1) normal。(2) break-word（此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。）。word-break用來控制斷詞。三種取值。(1)normal；(2)break-all（是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）。
