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

问题描述

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

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

代码如下




    
    
    Document
    


    
    
代码代码代码代码代码代码代码

wwwwwwwwwwwwwwwwwwww

6666666666666666666666666

效果图如下

image

解决方案

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

代码如下




    
    
    Document
    


    
代码代码代码代码代码代码代码

wwwwwwwwwwwwwwwwwwww

6666666666666666666666666

效果图如下

image

总结

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

你可能感兴趣的:(html5程序员css3)