在前端开发中解决英文字母或数字在父元素中不会自动换行而导致溢出的问题

[color=rgba(58, 58, 58, 0.88)]在前端开发过程中，经常会在文本中用到数字或英文字母表达，但你会发现中文文本在较小或条形容器中能正常换行和自动裁切，数字或英文字母则失效，这是为什么呢？通过排查的出结论：需要添加word-break:break-all属性，如下：

1.     overflow: hidden;  //多余裁切
   
2.     text-overflow: ellipsis;  //省略号
   
3.     display: -webkit-box;
   
4.     -webkit-line-clamp: 2;  //最多2行
   
5.     -webkit-box-orient: vertical;
   
6.     word-break: break-all;  //换行

复制代码