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

這篇文章主要介紹了關於css(word-wrap/break)讓純英文數字自動換行，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

在IE和FF中都會撐大容器，不會自動換行並且當數字或英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行,針對這個問題，本文給出了詳細的解決方法，有興趣的朋友可不要錯過了啊，希望本文對你有所幫助

當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數字的時候，在IE和FF中都會撐大容器，不會自動換行並且當數字或英文中帶有漢字時，會從漢字處換行，而純漢字卻可以自動換行。這個問題如何解決？先來認識兩位主角word-wrap和word-break
word-wrap用來控制換行
#兩種取值：
(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;

(1)break-all（是斷開單字。在單字到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。）
(2)keep-all（是指Chinese, Japanese, and Korean 不斷詞，一句話一行，可以用來排列古詩喲~）
(3)break-word（此值用來強制換行，內容將在邊界內換行，中文沒有任何問題，英文語句也沒問題。但是對於長串的英文，就不起作用。）

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

css中強制換行word-break、word-wrap、white-space的區別

以上是css(word-wrap/break)讓純英文數字自動換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！