连续字母或数字在盒子中不会自动换行,直接溢出
需求:审批意见在列表中展示效果不好,需要写一个弹出框显示完整。
实现:因为项目比较老,用的jsp,我的实现方式是在js里动态生成弹出框,用 P 标签去显示数据。
现象:正常的汉字和英文文章是能够实现换行。但是当输入连续的数字和字母后,出现不换行且溢出问题。
原因:在div css布局中,遇到连续英文字母或连续数字在div、p、h2、h1等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。中文字在div或任意盒子中均会自动换行不需要css样式实现,只有连续的字母或数字会出现不自动换行问题,所以需要CSS解决。
解决方案:
在 p 标签上加css样式:word-wrap:break-word (已弃用,不建议)或者 word-break: break-all;