沸腾展望新闻系统 当前在线5
  
  沸腾文摘  宁波文摘  旅游美食  试题资源  少儿资源  沸腾建站 
       栏目导航  网站首页>>沸腾文摘>>建站文摘
  共有 6831 位读者读过此文   字体颜色:   【字体:放大 正常 缩小】    
【双击鼠标左键自动滚屏】【图片上滚动鼠标滚轮变焦图片】    
 

无空格连续字符自动换行解决方案2

  发表日期:2005年12月17日   出处:郭爽的Blog        【编辑录入:base

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

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标签。你可以用 ​或者 &shy;来代替。

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>aaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaa</div>


兼容性问题:

IE(6以上版本) 认识 wbr &shy; 不认识 ​
firefox 认识 wbr ​ 不认识 &shy;
opera 认识 ​ &shy; 不认识 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>


上一篇:全自动停车库的火灾危险性探讨
下一篇:英制 - 公制单位换算

 相关专题:

·专题1信息无

·专题2信息无
 
  热门文章:
 · 瑞星RavmonD.exe[38424]
 · 拯救MP3机,低格工具Fi[33180]
 · 2008年6月英语新四级真[33140]
 · 2007年12月英语新四级[31632]
 
 相关文章:

·没有相关文章

相关评论:(评论内容只代表网友观点,与本站立场无关!)
相关评论无
发表、查看更多关于该信息的评论 将本信息发给好友 打印本页

copyright © 2002-2009 forecast news [沸腾展望新闻多媒体系统]  V1.5Access版 b2 all rights reserved 浙ICP备14004706号

| 网站地图 | 联系我们 | 帮助中心 | 图片文摘 | 沸腾淘宝店铺 |

xml聚合新闻rss2.0 firefox全面支持 手机WAP浏览支持 creative commons license

新闻系统核心: 尘缘雅境  制作:杨正炎(雪域一线天) [后台管理]
页面执行时间:62.500毫秒