| CODE |
| <style> div {width:300px;border:solid 1px #000} </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> |
运行这段代码，无论opera,firefox,ie都会出现溢出的现象。小区别在于 firefox 甚至连 / 号也不能自动断开。
IE解决办法
很简单，如下：
| CODE |
| <style> div {width:300px;border:solid 1px #000;word-break:break-all;} </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> |
但这样无法通过目前的html验证，word-break:break-all 属于CSS3的范围。为了验证，你可以用IE注释判断
| CODE |
| <!--[if IE]> <style> div {word-break:break-all;;} </style> <![endif]--> <style> div {width:300px;border:solid 1px #000;} </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> |
firefox解决办法
在中间适当位置加入 wbr标签。
| CODE |
| <style> div {width:300px;border:solid 1px #000;} </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> |
opera解决办法
至少目前的opera 8.5版本还不支持 wbr标签。你可以用 或者 ­来代替。
| CODE |
| <style> div {width:300px;border:solid 1px #000;} </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> |
兼容性问题：
IE（6以上版本） 认识 wbr ­ 不认识
firefox 认识 wbr 不认识 ­
opera 认识 ­ 不认识 wbr
firefox和opera统一使用 wbr，而指定wbr:after后面软换行。
| CODE |
| <style> div {width:300px;border:solid 1px #000;} wbr:after { content: "\00200B" } </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> |
opera也可以使用 连字符 效果来标识换行的发生。
| CODE |
| <style> div {width:300px;border:solid 1px #000;} wbr:after {content: "\00AD";} </style> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> |