解决字母或数字溢出盒子（文字超出时不自动换行）

╰+哭是因爲堅強的太久メ 2023-01-22 11:46 6阅读 0赞

昨天有两个舍友问了我这样一个问题，在盒子字母或数字超出时不会自动换行，但是中文就可以！！！！我说啥玩意？可能没遇到过的也听不懂，大家直接看案例：

## 代码如下： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>溢出问题解决</title>
      <style> div { height: 200px; width:200px; background-color: orange; } </style>
    </head>
    <body>
      <div>1111111111111111111111111111111111</div>
    </body>
    </html>

## 效果如下： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]

哎呦卧槽，当时我就好奇了诶，查了很多资料，虽然没找到真正的官方理解，但是问题解决了，大家往下看。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]

## 探究 ##

### 原因： ###

我没查到哈，我自己觉得内部编码时候是吧连在一起的数字或者字母当成一个整体了，单个整体显示时候按照行元素展示的不会换行（纯属猜测，希望有大佬见到评论指正）

### 解决 ###

CSS样式中加上下面任一一句即可。

word-break:break-all;
    		或者
    word-wrap:break-word;

w3cschool：[https://www.w3school.com.cn/cssref/pr\_word-break.asp][https_www.w3school.com.cn_cssref_pr_word-break.asp]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221020/e84891ba717b49d89b194a2ff538b33f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 1]: /images/20221020/5be4b700c6d24c32b4ce55a86a32a53f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70 2]: /images/20221020/db0a580f9ad84bbb809e371a4d2eafa5.png
[https_www.w3school.com.cn_cssref_pr_word-break.asp]: https://www.w3school.com.cn/cssref/pr_word-break.asp