css中有很多关键词可以实现相同的功能，其实它们各有各的用法，今天总结了容易被混用换行关键字white-space、word-wrap、word-break的区别

1、word-break

实例

在恰当的断字点进行换行：

p.test {word-break:hyphenate;}

定义和用法

word-break 属性规定自动换行的处理方法。

语法

word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

white-space

规定段落中的文本不进行换行：

例子：

    p{ white-space: nowrap }

定义和用法

white-space 属性设置如何处理元素内的空白。

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的

标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

word-break

允许长单词换行到下一行：

p.test {word-wrap:break-word;}

定义和用法

word-wrap 属性允许长单词或 URL 地址换行到下一行。

语法

word-wrap: normal|break-word;

值 描述

normal 只在允许的断字点换行（浏览器保持默认处理）。

break-word 在长单词或 URL 地址内部进行换行。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

word-break

允许长单词换行到下一行：

    p.test {word-wrap:break-word;}

定义和用法

word-wrap 属性允许长单词或 URL 地址换行到下一行。

语法

word-wrap: normal|break-word;

值 描述

normal 只在允许的断字点换行（浏览器保持默认处理）。

break-word 在长单词或 URL 地址内部进行换行。