去年写过一篇关于文本换行的文章发表在新浪博客里面，原文《word-wrap:break-word与word-break:break-all的区别所在》现在看来需要重新整理下了。

还记不记得昨天发表的《table表格那点事儿》最后的一个问题不？先撇开问题，我们从头说起。

在网页排版中，有些时候是需要文本自动换行的，对于中文来讲，无需设置属性即可自动实现换行，但是对于英文文章呢？附一段源码：

<div style="width:100px;background:#ccc;">
　CSS wraps text explanation - art collection design
</div>

英文是什么意思呢？其它我是直接把汉字（CSS文本换行详解---艺灵设计）放百度里面翻译的，坑爹的是：当我把翻译后的英文放进去再次翻译时，妹的竟然汉语发生了变化。唉，伤不起啊！不说了，回题，在此只以演示效果为准！ 亲们来猜猜上面那行代码在各浏览器中的执行效果如何？还是不难为各位亲了，直接上图一张：

发现什么没？根本就不需要写换行的属性就可以换行。你在想什么？难道在想各大浏览器厂商已经修复了bug?再附一段源码：

<div style="width:100px;background:#ccc;">
　CSS;wraps;text;explanation;-art collection design
</div>

附截图一张：

看到问题了吧，此时单词“explanation”超出了容器宽度，并没有自动换行。存在这一现象的还有一个典型的例子如下：

<div style="width:100px;background:#ccc;">
　222222222222222222222222222222222
</div>

附截图一张，

有图看得比较清楚。图中得出的结论是：正常情况下，纯数字也是不会自动换行的。那么这个现象最好的解释是什么呢？个人观点是：一长串数字或英文单词时，浏览器会误识别成是一个整体。但英文单词与数字还是有区别的。
下面来引入换行写法：

word-wrap:break-word（内容将在边界内换行。如果需要，单词内部允许断行。）

下面来看下这个换行的写法对上面两个有问题的案例生效情况如何。先上源码：

<div style="width:100px;background:#ccc;word-wrap:break-word">
　CSS;wraps;text;explanation;-art collection design
</div>
<div style="width:100px;background:#ccc;word-wrap:break-word">
　222222222222222222222222222222222
</div>

附各浏览器截图一张：

图中直观的显示了ie各版下的效果。在css2手册中还有一个属性也可起到换行的作用，那就是：

word-break:break-all(也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本)

下面再对比两个换行属性的细微之处。附源码：

<！--word-wrap:break-word-->
<div style="width:100px;background:#ccc;word-wrap:break-word">
　CSS;wraps;text;explanation;-art collection design
</div>
<!--word-break:break-all-->
<div style="width:100px;background:#ccc;word-break:break-all">
　CSS;wraps;text;explanation;-art collection design
</div>

两段代码对比后的截图如下：

两种写法各有优点，具体的要看具体情况而使用。至于那个“explanation”断词的现象，两个属性都不能解决，唯一解决的办法就是手工在前面敲一个空格，这个是自己想到的方法。若有大神有新方法，还请不吝赐教于评论区中。附图：

忘记说了，之前在ff上发现网站中存在一个换行的问题，就是有源码的地方ff下不会换行，附图：

找到了三种解决的方法。
方法一：添加“overflow”属性，值为auto，即文本过多时显示滚动条。
方法二：不要使用“pre”作容器的外框架，换行“div”或者“textarea”等即可解决问题。
方法三：如果继续使用，则添加white-space属性，其中normal; initial; pre-line; pre-wrap任一一个均可解决文本自动换行问题。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-06-18/163.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。