小细节:盒模型里面连续输入英文和数字不会自动换行,汉字会自动换行

简介: 小细节:盒模型里面连续输入英文和数字不会自动换行,汉字会自动换行

## 问题描述

昨天开发中遇到一个小问题,就是连续输入许多数字发现不换行,会一直横向超出盒子的宽度。但是如果是输入连续汉字就会自动换行。后来试了试连续输入英文也是不会自动换行。后来经过一番研究将细节总结一下:

##### 连续中文会自动换行(中间无空格)

##### 连续英文不会自动换行(中间无空格)

##### 连续数字不会自动换行(中间无空格)

### 代码如下

``` html

<!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>

```

### 效果图如下

![image](https://image-static.segmentfault.com/284/921/2849216310-6015efb73a460)

## 解决方案

通过css规则 word-break: break-all; 控制即可

### 代码如下

``` html

<!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>

```

### 效果图如下

![image](https://image-static.segmentfault.com/368/098/3680987542-6015f08d05983)

## 总结

程序员其实就是记住前人设定的规则,并使用前人设定的规则。具体为什么会这样,全当做规则定义的吧。同样的问题:为什么在中国开车默认靠右行驶?规则定义啊。至于规则为啥要这样定义,就要研究一下历史了...

相关文章
|
3月前
用*号输出字母C的图案
用*号输出字母C的图案。
59 16
|
2月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
82 0
|
3月前
给kprobe添加字符数据显示方式
给kprobe添加字符数据显示方式
|
前端开发
CSS:设置字母间距、中文汉字间距
CSS:设置字母间距、中文汉字间距
|
小程序 容器
小程序view标签内数字/字母显示不换行
小程序view标签内数字/字母显示不换行
485 0
多行文本溢出显示省略号
多行文本溢出显示省略号
65 0
文本单行省略号+多行出现省略号
文本单行省略号+多行出现省略号
|
前端开发
解决字母或数字溢出盒子(文字超出时不自动换行)
解决字母或数字溢出盒子(文字超出时不自动换行)
364 0
解决字母或数字溢出盒子(文字超出时不自动换行)
|
JavaScript 前端开发
文本溢出显示省略号
文本溢出显示省略号
文本溢出显示省略号