在网页中经常碰到字符断行的问题,一般情况下只要设置了外层容器的宽度都能自动断行,但也不能排除极端情况下,比如数字“11111111”和字母“lllllllllllllllllllllll”的情况下,浏览器就不能自动断行了。这时用word-wrap:break-word;和word-break : break-all;属性就能解决。但这只是IE7及以下浏览器能支持,FF和IE8就不支持了(FF4.0好像可以了)。
原来解决这个问题都是用JS判断字符数,然后加上“<br />”强制断行,今天遇到了新需求,再用这个JS处理就不是很理想了。
就是如果用JS判断字符数,因为像数字中文“啊啊啊啊”“1111”和字母“llll”字符数是一样,但所占宽度相差还是很大的,所以这个方法对于需要处理很细的项目还是不行的。
在群里和各位前辈们讨论了,也没有其它好的方法,菲哥提供了一个解决方法就是,使用等宽字体,因为每个字符的宽度都一样,那样用JS处理字符截断不同的字符效果就一样了,但这也局限了字体,等宽字体排版不好看,现在用等宽字体的也很少。
后来在百度知道上看到百度的解决方法不错,就是用“<pre>”将内容包起来,然后设定它的宽度,同时加上white-space: pre-wrap; word-wrap: break-word; ,问题解决!暂时用的效果不错,可能会有些局限性不能用这个标签,但暂时还没有碰到别的解决方法,这个算是比较完美的了。