网页布局中对于文本的换行都好简单，CSS里有几个属性，好容易搞不清楚，我们来讨论一下这几个换行、断行的区别，在实际运用中得多多测试才确定是不是你想要的效果。

white-space:用于块状元素，处理容器中空白，换行

所谓的合并空白距离至少会保留一个空格，在本站代码块中，为了使所有的代码都向左对齐，那就要用到合并空白距离并换行，所以用到white-space:pre-line

• normal： 合并空白距离，不保持原来换行，文字超出边界时会换行（这个有点像压缩JS或CSS的操作）
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行aaaaaabbbccccccccccccccccccccccdddddddddddddddddddd
• pre：不合并文字间的空白距离，当文字超出边界时不换行，保持原样（其它样式原样都是这个样子）
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行aaaaaabbbccccccccccccccccccccccdddddddddddddddddddd
• pre-wrap：不合并文字间的空白距离，当文字碰到边界时发生换行
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行aaaaaabbbccccccccccccccccccccccdddddddddddddddddddd
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行aaaaaabbbccccccccccccccccccccccdddddddddddddddddddd
• nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行aaaaaabbbccccccccccccccccccccccdddddddddddddddddddd

小结：例子中看到连续英文的时候，white-space不起作用，得用到下面介绍的word-bread或word-wrap

下面就介绍连续英文的打断：word-break与word-wrap

word-break：英文字母间打断换行，断字母的

• break-all：使连续的英文字母间断行
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nemo totam non, et excepturi, deleniti, maiores in vero inventore delectus incidunt voluptates exercitationem placeat maxime. Nulla facilis molestiae omnis quo?

word-wrap：单词间断行，在CSS3中等同：overflow-wrap（这个苹果浏览器不支持），断词的

• break-word：断得感觉会不整齐
  轻轻地我 走了
  正如我轻轻地来 这里有好多文字一碰到边界就会发生换行Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore itaque corporis, eligendi quo reprehenderit deleniti porro maiores vel recusandae natus, commodi aliquam perferendis dicta fugit iure quae esse enim quia!

小结：对比一下效果可以看到，white-space与word-break,word-wrap三者的normal效果一样的。就是不使用这几个默认也是这个效果。word-break全部英文字都断行，word-wrap词间断行。

用法总结：

1. 文本一行内全部显示时用：white-space:nowrap
2. 换行本来就是默认，只有一点就是连续的英文需要处理下就行
3. 要想换行后都向左对齐，每行密集，可以用：white-space:pre-line
4. 断行要切底建议使用：word-wrap:bread-word，这个能断行像网址那样的//字符。