单词太长导致自动换行，出现空白区域。——word-wrap和word-break（英文单词换行）

写在前面：

在写页面的时候，偶尔有时会遇到下图这两种情况，一种是单词过长时会溢出div，一种是直接换行，导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了，本文主要内容有：word-wrap和word-break**属性介绍，使用方法，他们之间的区别，浏览器兼容性，demo链接**。需要的朋友可以过来参考下，喜欢的可以点个赞，希望能对大家有所帮助。

应用场景：

word-wrap和word-break是什么？

在mozilla的官网上找到如下的解释：

经过翻译：word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。

何谓单词内断句？

这个单词没有发生单词内断句的情况，这个单词太长了，溢出了容器的范围。

下面是发生了单词内断句的情况实例：

这里面分别使用了word-wrap：break-word;和word-break:break-all;这里可以看到，效果是一样的，下面再说说他们的区别。

word-wrap的属性介绍

word-wrap的浏览器支持情况：

语法：

/* 二选一 */
word-wrap: normal;
word-wrap: break-word;

解析：

normal就是大家平常见得最多的正常的换行规则，break-word如果长单词超出了一行的长度的话，在一行中有可以换行的标点时就换行，实在没有可以换行的地方时，才在单词中间换行。（这句的解析入下图）

上图就是：一行中有可以换行的标点时就换行，实在没有可以换行的地方时，才在单词中间换行

word-break属性的属性介绍：

浏览器支持：

除了opera不支持以外，其他都支持（火狐也从不支持改为支持了）!

语法使用：


/* 默认normal */
word-break: normal;
word-break: break-all;
word-break: keep-all;

解析：几个关键字值的含义如下：
normal
使用默认的换行规则。

break-all
允许任意非CJK(Chinese/Japanese/Korean)文本间的单词断行。(这里是CJK中文，日文，韩文的意思)

keep-all
不允许CJK(Chinese/Japanese/Korean)文本中的单词换行，只能在半角空格或连字符处换行。非CJK文本的行为实际上和normal一致。(一致性可看下图的demo效果)

word-break:break-all和word-wrap:break-word之间的区别：

其实可以从上述demo栗子中看出来：

word-break:break-all碰到英文单词统统都换行，只要到了容器的边界就会换行，不浪费一点空间，一点空隙都不放过。

而word-wrap:break-word在一行中有可以换行点时就换行，实在没有可以换行的地方时，才在单词中间换行。

这里所说的换行点指的是：如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韩文)之类的，让这些换行点换行，至于对不对齐，好不好看，则不关心，因此，很容易出现一片一片牛皮癣一样的空白的情况。

后话：

以上就是本文的内容了，其实大概分清他们的区别，以后碰到这类型问题，知道需要用哪个属性来解决就好了。

最后：因为我经常看不懂别人写的分享，所以个人写文比较偏小白，写的不好之处，欢迎指点。然后就是希望看完的朋友点个喜欢，也可以关注一下我，现在这阶段基本上每个月都不会少于十五篇文章（看到干货我也会进行分享）。码字不易，感谢支持！
ps：目前待业，坐标北京，求推荐工作。然后希望我写哪方面的文章可以在底下评论，或者是私信我，虽然写的不好，但我就当这是记录自己成长的一种方式咯。（前提是我会了，如果不会我也会记下来，等会了的时候再更出来。）
掘金个人主页  ，简书主页链接，csdn博客主页链接 ，github 。

参考链接：

word-break:break-all和word-wrap:break-word的区别

你真的了解word-wrap和word-break的区别吗？

CSS3 word-wrap 属性

CSS3 word-break 属性