white-space、word-wrap和word-break区别

white-space

• 作用于空格和回车，用于控制空格是否合并、回车是否可折行、句子太长是否在空格处折行
• 常用取值不同的作用
  
  • normal: 多个连续的空格会被合并为一个，回车会被忽略，同时句子如果太长，会在空白处折行
  • nowrap: 与normal不同的一点是如果句子长了也不会折行
• 常用的省略号的实现

.classA {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

• 如果用了white-space为nowrap，设置其他的强制折行（word-break）是不起作用的，要将white-space设置为normal

word-wrap

• 作用于单词上，控制超长单词是否折行
• 常用取值的作用：
  
  • normal: 单词超长也不可折行，产生溢出
  • break-word: 单词超长会折行

word-break:normal | break-all | keep-all (词内换行)

• normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
• break-all : 强行换行,将截断英文单词
• keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.