小穎最近心情不好，心情不好就容易做傻事，所以昨天就干了件傻事
小穎昨天腦子一抽去拔罐了，拔完我就~~~~~~~~~~~~疼死寶寶了，昨晚一晚都沒睡好，都不敢平躺，難受一晚上，早上到公司后困得啊，也是傻得沒誰了。
好啦言歸正傳，今天小穎給大家分享下，小穎理解的word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;。下面就一起來看看代碼吧!
先看看頁面效果圖吧：
html代碼：
<body> <div class="main"> <div class="txt-one"> <div class="no-word-break-ch"> 伴隨着中國移動(微博)成功牽頭5G系統設計，其4G用戶的規模也達到了驚人的數量。在今日舉行的第七屆全球移動寬帶論壇（Global Mobile Broadband Forum以下簡稱MBBF）上，中國移動總裁李躍透露，截至目前，中國移動4G用戶已突破500億戶。 </div> <div class="word-break-ch"> 伴隨着中國移動(微博)成功牽頭5G系統設計，其4G用戶的規模也達到了驚人的數量。在今日舉行的第七屆全球移動寬帶論壇（Global Mobile Broadband Forum以下簡稱MBBF）上，中國移動總裁李躍透露，截至目前，中國移動4G用戶已突破500億戶。 </div> </div> <div class="txt-two"> <div class="no-word-break-eg"> Along with China mobile (weibo) success led 5 g system design, the size of its 4 g users reached a surprising number. Held today in the 7th Global Mobile Broadband BBS (Global Mobile Broadband Forum, hereinafter referred to as MBBF), China Mobile's chairman, Mr Li said so far, China Mobile's 4 g users has exceeded 500 million. </div> <div class="word-break-eg"> Along with China mobile (weibo) success led 5 g system design, the size of its 4 g users reached a surprising number. Held today in the 7th Global Mobile Broadband BBS (Global Mobile Broadband Forum, hereinafter referred to as MBBF), China Mobile's chairman, Mr Li said so far, China Mobile's 4 g users has exceeded 500 million. </div> </div> <div class="txt-three"> <div class="no-word-warp-ch"> IHSTechnology中國研究總監王陽表示，今年好幾個大的手機廠商都虧得厲害，明年越虧越多，挺不住的就得倒掉一個多月來，人民幣匯率猶如坐上了滑 梯，一路400滑下，在即將跌至6.90關口之時，人民幣對美元中間價結束了12連跌的戲碼。 </div> <div class="word-warp-ch"> IHSTechnology中國研究總監王陽表示，今年好幾個大的手機廠商都虧得厲害，明年越虧越多，挺不住的就得倒掉一個多月來，人民幣匯率猶如坐上了滑 梯，一路400滑下，在即將跌至6.90關口之時，人民幣對美元中間價結束了12連跌的戲碼。 </div> </div> <div class="txt-four"> <div class="no-word-warp-eg"> IHSTechnology China research director wang Yang said that this year several big handset manufacturers are luckily, lost more more next year, is not have to pour out In more than a month, the RMB exchange rate is on the slide, slide down all the way, in the 6.90 mark, the yuan central parity rate against the dollar over 12 losses of drama. </div> <div class="word-warp-eg"> IHSTechnology China research director wang Yang said that this year several big handset manufacturers are luckily, lost more more next year, is not have to pour out In more than a month, the RMB exchange rate is on the slide, slide down all the way, in the 6.90 mark, the yuan central parity rate against the dollar over 12 losses of drama. </div> </div> </div> </body>
css代碼：
<style media="screen"> .main { width: 600px; margin: 0 auto; } .txt-one, .txt-two, .txt-three, .txt-four { overflow: hidden; } .txt-one { background-color: #aaeeee; } .txt-two { background-color: rgba(244, 67, 54, 0.38); } .txt-three { background-color: rgba(238, 232, 170, 0.92); } .txt-four { background-color: rgba(33, 150, 243, 0.86); } .no-word-break-ch, .word-break-ch, .no-word-break-eg, .word-break-eg, .no-word-warp-ch, .word-warp-ch, .no-word-warp-eg, .word-warp-eg { width: 290px; float: left; } .no-word-break-ch, .no-word-break-eg, .no-word-warp-ch, .no-word-warp-eg { padding-right: 15px; } .word-break-ch, .word-break-eg { word-break: break-all; /*允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。*/ word-break: keep-all; /*不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行為實際上和normal一致。*/ } .word-warp-ch, .word-warp-eg { word-wrap: break-word; /*內容將在邊界內換行。如果需要，單詞內部允許斷行。*/ /*white-space:nowrap; 用於處理元素內的空白，使得元素里的內容只在一行內顯示。*/} </style>
我們先來看看word-break: 和word-break: ;
圖（1）
圖（2）
圖1是word-break: break-all; 允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
圖2是word-break: keep-all; 不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行為實際上和normal一致。
圖中的左側div小穎沒有給其加 word-break 樣式，大家通過對比可以看出圖1中給div設置了 word-break: break-all; 后div里面的內容中文右側和左側對比發現數字500部分換行顯示；英文右側和左側對比發現英語單詞 success、surprising、Global、Mobile、referred等英文單詞因為當前行顯示不完，直接將顯示不完的部分換行顯示，而沒有整個單詞換行顯示。
圖2 中給div 設置了 word-break: keep-all; ，只能在半角空格或連字符處換行，比如：伴隨着中國移動(微博)成功牽頭5G系統設計， 這段話因為太長所以，在 “）”處換行。當小穎將 “)”刪除后，這段話則在“(”處換行，再比如 中國移動總裁李躍透露， 這段話在 Forum以下簡稱MBBF）上， 之后但因 中國移動總裁李躍透露， 這段話太長所以在 “，”處換行。
再來看看 word-wrap:
小穎給圖中左側div沒有設置 word-wrap: 右側div設置了 word-wrap:
當小穎給右側的div設置的white-space:nowrap;后，div里面的內容就成了只在一行顯示。