word-wrap:break-word和word-break:break-all

之前通过几何分形学学习了一下缓存机制，今天来学习一下“字词分割学”吧，哈哈，我自己瞎造的词，主要是为了学习一下CSS的两个属性：word-wrap和word-break。

word-wrap

设置或检索当内容超过指定容器的边界时是否断行。
该属性的值有：

• normal：允许内容顶开或溢出指定容器的边界。（即使内容超出边界也不断行。）
• break-word：内容将在边界内换行。如果需要，单词内部允许断行。（当长单词所占据的宽度超过容器的宽度时，这个长单词会被换行显示。）

注：word-wrap属性最开始是IE的私有属性，后期被w3c采纳为标准属性，到CSS3时，该属性被更名为语义更准确的overflow-wrap。

word-break

设置或检索对象内文本的字内换行行为。
该属性的值有：

• normal：亚洲语言允许字内换行，非亚洲语言不允许字内换行。
• keep-all：亚洲语言和非亚洲语言都不允许字内换行。
• break-all：亚洲语言和非亚洲语言都允许字内换行。
  注：通常，为了防止无意义的长单词打破页面布局，我们会使用word-break:break-all;设置文本样式。
  demo在这里

扩展

我们常常会收到这样的需求：比如，文章列表的标题，希望单行显示，固定宽度，超出部分要用省略号代替。
这个需求要使用到CSS的另外一个属性叫white-space，这个属性的作用是设置或检索对象内空格的处理方式，该属性的属性值有：

• normal：默认处理方式。
• pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。
• nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
• pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

需求是，文章列表标题要单行显示，很明显，就需要设置white-space:nowrap;仅仅使用这一个属性只能满足标题单行显示，如果标题字数特别多，导致标题所占据的宽度超过容器的宽度时，就会发生文字溢出的现象，所以，我们还需要设置overflow:hidden;来隐藏超出容器部分的文字。需求里还有一点，就是超出部分要用省略号代替，这个也可以用CSS来实现，只需设置text-overflow:ellipsis;即可。所以，最终满足需求的所有代码如下：

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

参考：
CSS参考手册
word-break:break-all和word-wrap:break-word的区别