關于長串數字字元串的換行

在項目中遇到一個問題，就是在一個div中包含了一長串的字元串，純數字用逗号隔開。想實作換行的效果嘗試了加寬度限制等各種方式，最終都達不到想要的效果。詢問了前端的同僚才得知産生這樣的原因是浏覽器把那一個長串當做了一個數字長串，還有單詞長串。對于這種浏覽器他是不會将這個長串進行截斷的，如果目前行放不下他他會直接整個移到下一行。針對這種情況就需要我們自己去設定換行了。這就是CSS的兩個屬性word-wrap:break-word;與word-break:break-all;

word-wrap與word-break這兩個樣式屬性都是用來強制斷句的，他們的差別在于

• word-wrap 屬性用來标明是否允許浏覽器在單詞内進行斷句，這是為了防止當一個字元串太長而找不到它的自然斷句點時産生溢出現象。
• word-break 屬性用來标明怎麼樣進行單詞内的斷句。

總結：一個長單詞因為浏覽器把它當做一個長串的時候，如果目前行放不下他，那麼就會把它整個移動到下一行。當長串的長度超過了其所在的區域時，那麼就會直接沖出你設定的區域，此時我們就可以加CSS屬性word-wrap:break-word;來使浏覽器進行斷句換行，那麼第二行中超出的部分就會被移動到第三行。因為第一行中還有部分空間，如果我們想充分利用那麼我們就可以加CSS屬性word-break:break-all; 使我們第一行中最後的部分也能被使用。