这绝对是老生常谈了。今天大概看了看，有些小发现。

</p> <style> <p>div {width:300px;border:solid 1px #000}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

运行这段代码，无论opera,firefox,ie都会出现溢出的现象。小区别在于 firefox 甚至连 / 号也不能自动断开。

IE解决办法

很简单，如下：

</p> <style> <p>div {width:300px;border:solid 1px #000;word-break:break-all;}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

但这样无法通过目前的html验证，word-break:break-all 属于CSS3的范围。为了验证，你可以用IE注释判断

</p> <p><!--[if IE]></p> <style> <p>div {word-break:break-all;;}</p> </style> <p><![endif]--></p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/david/index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

firefox解决办法

在中间适当位置加入 wbr标签。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

opera解决办法

至少目前的opera 8.5版本还不支持 wbr标签。你可以用 ​或者 ­来代替。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> </style> <div>http://blog.guoshuang.com/​david/​index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

兼容性问题：

IE（6以上版本） 认识 wbr ­ 不认识 ​

firefox 认识 wbr ​ 不认识 ­

opera 认识 ​ ­ 不认识 wbr

firefox和opera统一使用 wbr，而指定wbr:after后面软换行。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> <p>wbr:after { content: "�0200B" }</p> </style> <div>http://blog.guoshuang.com/<wbr>david/<wbr>index.asp?vt=bycat&cat_id=31</div> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

opera也可以使用 连字符 效果来标识换行的发生。

</p> <style> <p>div {width:300px;border:solid 1px #000;}</p> <p>wbr:after {content: "�0AD";}</p> </style> <div>aaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaaaaaaaaa<wbr>aaaaaaaaaaaaaaaaa</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]