问题形容
昨天开发中遇到一个小问题，就是间断输出许多数字发现不换行，会始终横向超出盒子的宽度。然而如果是输出间断汉字就会主动换行。起初试了试间断输出英文也是不会主动换行。起初通过一番钻研将细节总结一下：
间断中文会主动换行（两头无空格）
间断英文不会主动换行（两头无空格）
间断数字不会主动换行（两头无空格）
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #cde; /* 默认换行规定就是normal模式，写不写一个样 */ word-break:normal; } </style></head><body> <!-- 间断汉字会主动换行 --> <div> 代码代码代码代码代码代码代码 </div> <br> <!-- 间断英文不会主动换行 --> <div> wwwwwwwwwwwwwwwwwwww </div> <br> <!-- 间断数字不会主动换行 --> <div> 6666666666666666666666666 </div></body></html>效果图如下
解决方案
通过css规定 word-break: break-all; 管制即可
代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #cde; /* 默认换行规定就是normal模式，写不写一个样 */ word-break:normal; /* 解决方案，加上这个 */ word-break: break-all; } </style></head><body> <div> 代码代码代码代码代码代码代码 </div> <br> <div> wwwwwwwwwwwwwwwwwwww </div> <br> <div> 6666666666666666666666666 </div></body></html>效果图如下
总结
程序员其实就是记住前人设定的规定，并应用前人设定的规定。具体为什么会这样，全当做规定定义的吧。同样的问题：为什么在中国开车默认靠右行驶？规定定义啊。至于规定为啥要这样定义，就要钻研一下历史了...