• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 4周前 (01-31) 13次浏览

问题描述

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

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

代码如下

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

效果图如下

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

总结

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


喜欢 (0)