发布日期：2016-05-26 17:05:48
web app在处理西方文字的时候总会遇到这样一个问题，那就是单词的换行问题。
如何不让长单词溢出？
如何在不让长单词溢出的同时，更好的利用换行引起的空间？
这就是word-wrap和word-break的出现原因。
来看图找不同吧：
分解动作：
1) 浏览器默认行为： 当word不能被当前行容纳时，该单词会另起一行。所以原先行会有多余空间空出。而如果这个word又是很长很长以至于不能被一行容纳，则会溢出。
2）在上面这种特别长的单词时，溢出肯定不是我们想看到的，所以就有了word-wrap属性来帮忙，有了它就可以帮助解决溢出的问题。
3）有人精(chui)益(mao)求(qiu)精(chi)，对上面一行多出来的空格不满意，说要加以利用。于是就有了word-break属性。
4）貌似这下问题就解决了。可又有人不满意了。说在使用了"word-break:break-all;"后我不是很长的单词也被截断了。这不是我想要的。而"word-break:keep-all"只在连接符（hyphens）的地方断词，而且不能解决超长单词溢出的问题。
5）于是针对短单词被截断的问题，发现还是word-wrap似乎更合理。但是word-wrap在处理 时，似乎又不同。
6）所以在遇到一个长句中所有的空格被 替换时，仍然会有看起来是short word短单词的被截断了的情况。（这些都是特例，在有些场景会有这种特性需求，如保留用户输入的空格显示，有几个空格就应该显示几个空格。）这是不是很头疼！于是又会去想SPACE+ 的解决思路。也有些小问题。看来自己计算换行吧。
坑，只会填完一个又一个！