这绝对是老生常谈了。今天大概看了看，有些小发现。
| 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>
|
|
上一篇：
发表、查看更多关于该信息的评论
将本信息发给好友
打印本页
