CSS-span中的数字和字母不能正确折行

前段时间遇到的一个bug，当时的情况大概是这样：

（代码结构很简单，我就不贴了，就是div标签里面有一个span标签。）
很明显，数字和字母都没有正确折行，整个布局都被打乱了。

解决这个问题还蛮简单的，只需要用到css的word-break属性。CSS 属性 word-break 指定了怎样在单词内断行，详情见MDN文档——word-break属性 | MDN。
word-break主要有四个取值（非继承取值）：

• normal（默认）
• break-all
• keep-all
• break-word
  normal是默认，就是上面图片的样子。

break-all

对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

也就是说自由断行，只要该换行，不管前后直接断。

🌰栗子

如果span标签中的英文/数字内容不需要考虑连接问题，那使用break-all属性就OK了。
但是，如果span里面是一些英文语句，那这么做恐怕不妥。

假如我把内容换成《I have a dream》演讲稿的其中一段，使用break-all值就会出现这种情况：

很明显，左右两边边缘的单词也被断开了，这样断行显然是不规范的。

keep-all

CJK 文本不断行。 Non-CJK 文本表现同 normal。

keep-all的断行规则基本上是按照空格或者回车符断行，说总是起来很抽象，让我们直接看示例：
🌰栗子

上图第一个框里面的内容是连着写的，所以根本就没换行，下面的框中是演讲稿中的一段，可以看出来，是按照单词前后换行。

break-word

顾名思义，该属性从单词前后断行。
🌰栗子

英文文章断的好像和keep-all没什么区别，而第一张图的断行j就看起来十分奇怪了。

（END）