前端css 纯数字或者字母 溢出不换行

问题：一个div元素盒子 宽度固定 内容是中文到达盒子宽度放不下时会自动换行，但是如果输入的事纯数字或者字母 会发现内容区会溢出 

异常现象：11111超出div盒子 

---

 

解决方案：添加属性

word-break: break-all;

---

 

原理：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

---

 关于word-break解释：

word-break: normal |keep-all | break-all | inherit ;

此属性的默认值为 normal。因此，当我们不指定任何值时，它将自动使用。

keep-all以默认样式。

break-all：：为了防止出现单词，在字符之间插入分词符。浏览器将在任何时候断开换行。如果太长而无法容纳单词并且出现在行尾，则可能会使单词从中间断开。

initial：。它将属性设置为其默认值。

inherit：它从其父元素继承属性。