word-break解决页面英文不换行问题

在项目开发中遇到一个问题，就是有中英文混合的字段时，单词不会自动换行的问题，问题复现如下：

        

在遇到英文的时候就会进行直接换行，导致页面结构错乱

解决方法，通过word-break: break-all; 属性进行解决

1.word-break: normal; 默认属性， 使用默认的断行规则。

2.word-break: break-all;    对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

3.word-break: keep-all;   CJK 文本不断行。 Non-CJK 文本表现同 normal。 

 

 4.word-break: break-word;   他的效果是word-break: normal 和 overflow-wrap: anywhere  的合，不论 overflow-wrap的值是多少。