css为div设置了宽度,内容为连续数字或字母时溢出不换行的原因和解决方案

原因:
当我们为div标签声明了宽度,当文本内容为连续字母或者纯数字的时候会出现文本越界的情况。原因是由于:浏览器在解析我们页面的时候,将这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。
解决方案:
1.word-wrap: break-word; 内容将在边界内换行。如果需要,单词内部允许断行
word-break: normal;

2.word-break: break-all;该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字母间断行。
相比较于上面的方法,这种方法的好处在于假如在宽度的范围内的临界区存在一个完整的单词,它会保留一个完整的单词自动换行 。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容