css解决数字或者字母太长不自动换行，中文字符换行

最近在两个项目中都遇到了数字或者字母太长不自动换行的问题,在此记录一下:

数字或者字母太长不自动换行换行问题：

只要在相应的地方加上css,如果改的地方多的话建议写成全局的:

.element {
  word-break: break-all;
}

中文字符换行问题：

如下图，当遇到中文符号的时候，明明后面有很多空位却换行了。

解决方案：

.element {
    line-break: anywhere;
}

line-break语法如下：

auto使用默认的换行规则。

loose使用限制性最小的换行规则分隔文本。通常用于短行，如在报纸上。

normal使用最常见的换行规则。

strict使用最严格的换行规则。

anywhere任意位置都可以作为换行点，包括任意的标点。

最后的效果：