单词太长致使自动换行，出现空白区域。——word-wrap和word-break

写在前面：

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

应用场景：

属性的应用场景

word-wrap和word-break是什么？

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

word-wrap的英文解释

word-break的英文解释

通过翻译：word-wrap:

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

word-break:

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

何谓单词内断句？

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

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

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

word-wrap的属性介绍

w3c：word-wrap

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

全部浏览器都支持

语法：

/* 二选一 */
word-wrap: normal;
word-wrap: break-word;复制代码

解析：

normal就是你们日常见得最多的正常的换行规则，break-word若是长单词超出了一行的长度的话，在一行中有能够换行的标点时就换行，实在没有能够换行的地方时，才在单词中间换行。（这句的解析入下图）

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

word-break属性的属性介绍：

w3c上关于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 属性