无论你是中文,还是英文,抑或是特殊符号,请自动换行吧

那年,那月,那日,那时,发现了一个Bug,英文字符在某些情况下没有自动换行。效果图如下:



对于这种大大影响界面美观的代码,肯定是在不同浏览器下不同文件有不同的编码方式所致,为解决此问题,本人先在不同浏览器下使用相同的代码进行测试,结果发现各种诡异的问题。最终,唯有一种CSS样式可以适应所有的浏览器,它就是下面的代码。

width:200px;
word-wrap:break-word ;
word-break: break-all;

上面的代码出现的效果图如下:



为了方便各位博客针对此代码进行测试,本人写了一个测试文件,感兴趣的朋友,可以免费试用~~





测试中英文换行问题

用户自以为是的换行:style="width:200px"

宽度为200px下的中文测试数据:长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长
宽度为200px下的英文测试数据:LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
宽度为200px下的特殊字符测试数据:长长长长长长长长长长长长长长长长长长长长长长长长............................................
宽度为200px下的数字测试数据:000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

用户自以为是的换行:style="width:200px;word-wrap:break-word ;"

宽度为200px下的中文测试数据:长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长
宽度为200px下的英文测试数据:LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
宽度为200px下的特殊字符测试数据:长长长长长长长长长长长长长长长长长长长长长长长长..............................................
宽度为200px下的数字测试数据:000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

用户自以为是的换行:style="width:200px;word-wrap:break-word ;word-break: break-all;"

宽度为200px下的中文测试数据:长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长
宽度为200px下的英文测试数据:LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
宽度为200px下的特殊字符测试数据:长长长长长长长长长长长长长长长长长长长长长长长长..............................................
宽度为200px下的数字测试数据:000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000






本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部