小颖最近心情不好，心情不好就容易做傻事，所以昨天就干了件傻事
小颖昨天脑子一抽去拔罐了，拔完我就~~~~~~~~~~~~疼死宝宝了，昨晚一晚都没睡好，都不敢平躺，难受一晚上，早上到公司后困得啊，也是傻得没谁了。
好啦言归正传，今天小颖给大家分享下，小颖理解的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: break-all;和word-break: keep-all;
图（1）
图（2）
图是word-break: break-all; 允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。
图是word-break: keep-all; 不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。
图中的左侧div小颖没有给其加 word-break 样式，大家通过对比可以看出图中给div设置了 word-break: break-all; 后div里面的内容中文右侧和左侧对比发现数字500部分换行显示；英文右侧和左侧对比发现英语单词 success、surprising、Global、Mobile、referred等英文单词因为当前行显示不完，直接将显示不完的部分换行显示，而没有整个单词换行显示。
图 中给div 设置了 word-break: keep-all; ，只能在半角空格或连字符处换行，比如：伴随着中国移动(微博)成功牵头5G系统设计， 这段话因为太长所以，在 “）”处换行。当小颖将 “)”删除后，这段话则在“(”处换行，再比如 中国移动总裁李跃透露， 这段话在 Forum以下简称MBBF）上， 之后但因 中国移动总裁李跃透露， 这段话太长所以在 “，”处换行。
再来看看 word-wrap: break-word;
小颖给图中左侧div没有设置 word-wrap: break-word; 右侧div设置了 word-wrap: break-word;，不过左右两侧的中英文显示并没有什么区别。
word-wrap: break-word; 内容将在边界内换行。如果需要，单词内部允许断行。
最后一个 white-space:nowrap;
当小颖给右侧的div设置的white-space:nowrap;后，div里面的内容就成了只在一行显示。