div中的内容超过容器宽度的问题

问题描述：

<div class="category">
    <div class="column-a">排名</div>
    <div class="column-b">参赛选手</div>
    <div class="column-c">月收益</div>
    <div class="column-d">月收益率</div>
</div>

在一个div中横向放置了4个inline-block，宽度为百分比，加起来总共是100%。当其中一个inline-block的文字内容超过元素本身的宽度时，发现其他3个inline-block位置会发生改变，但是如果这个inline-block的内容如果为数字或者一整个连续的英文字符串，其他3个inline-block的位置不会发生改变，不过如果这个inline-block的内容为英文段落（单词之间有空格）并且内容超过元素本身的宽度时，其他3个inline-block的位置还是会发生改变。

原因：浏览器在解析我们页面的时候，会把一串数字当成一个单词了，这样就不会自动切断字符串而进行换行。同理，一整个连续的英文字符串也不会自动切断字符串而进行换行。

word-break:break-all和word-wrap:break-word的区别
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

再扯一下word-spacing和white-space的区别，它们长得也有点像。
word-spacing是单词之间间距的，white-space是字符是否换行显示的。规定段落中的文本不进行换行可以使用white-space:nowrap;