CSS设置了word-break:break-all，输入中英文标点符号不换行问题

一、问题

正常的时候，使用 word-break:break-all 可以将英文或中文自动换行。

但是如果输入了标点符号（中文或英文的标点符号），这种换行特性就失效了，即使设置white-space 属性也是无效的，此时可以用到的CSS属性是line-break。

二、解决方案

Line-break属性简介：

line-break属性主要用在CJK语言中，也就是中日韩3种语言中，其中以中文和日文为主。

line-break: auto;       // 使用默认换行符规则分隔文本。 
line-break: loose;      // 使用限制最少的换行符规则分隔文本。通常用于较短的行，如报纸。
line-break: normal;    // 使用最常见的换行符分割文本。
line-break: strict;       // 使用最严格的换行符规则分隔文本。
line-break: anywhere;  // 任意位置都可以作为换行点，包括任意的标点。

我们只需要在css中加上 line-break: anywhere 就可以自动换行了，同时也不影响中英文换行。