让长字符自动换行 比如URL和Email地址等

核心提示:另外,关于网上所说的用js来让长字符串在Firefox里面自动换行的方法,不推荐使用,原因是换行之后得到的字符串,已非本来的字符串了,比如要是一个链接地址的话,你再去复制,你已经得不到原来的地址了,中间会出现一个空格。那已经是另外的一个链接了。

让长字符自动换行 (比如 URL 和 Email地址) 目的:让很长的字符串,能自动换行,但是不要把短的单词从中间断开。

方法如下:

  1. <style>  
  2. div{   
  3. width:300px;overflow:hidden;/* for FF,Opera ,固定宽度;隐藏多余的字符*/   
  4. word-wrap:break-word;word-break:normal;/* for IE,Safari ,支持自动换行*/   
  5. }   
  6. </style>  

你可以在IE,Firefox,Opera,Safari里面分别运行下面的代码,看看:

  1. <style type="text/css">  
  2. div{width:200px;background:red;overflow:hidden;word-wrap:break-word;word-break:normal;}   
  3. </style>  
  4. <div>congratulations   
  5. 让长字符自动换行 (比如 URL 和 Email地址):   
  6. http://www.div-css.com/html/standard/base/81857.html   
  7. SDFG SOME word has spacing...   
  8. XXXXXXXXXXXXDGXXXXXXXXYYYYDFGYYXXXXXXXSDGXXXXXXXXXXXXyXXXXXXXXXXxwhite-space: nowrap   
  9. 一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体,可能不会换行   
  10. Web标准化 <a href="http://www.div-css.com" _fcksavedurl="http://www.div-css.com">www.div-css.com</a>  
  11. 中文文字 中文文字 中文文字 中文english文字 中文文字 中文english文字 中文english文字 中文english文字 中english字 中english字 中english字 中english字   
  12. </div> 
另外,关于网上所说的用js来让长字符串在Firefox里面自动换行的方法,不推荐使用,原因是换行之后得到的字符串,已非本来的字符串了,比如要是一个链接地址的话,你再去复制,你已经得不到原来的地址了,中间会出现一个空格。那已经是另外的一个链接了。
特别注意:本人提示:这个css样式只是对ie等起作用,对火狐(ff)没用。所以要是兼容ie和火狐的话,请注意看我的另一篇文摘:http://blog.csdn.net/gayayzy/article/details/7175225。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值