css实现长字符自动换行(URL和Email地址等)的代码

发布时间:2020-01-10编辑:脚本学堂
本文介绍下,用css实现长字符自动换行的代码,比如可以让url或email地址自动换行。有需要的朋友,参考下吧。

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

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

方法如下:
 

复制代码 代码示例:
<style> 
div{  
width:300px;overflow:hidden;/* for FF,Opera ,固定宽度;隐藏多余的字符*/  
word-wrap:break-word;word-break:normal;/* for IE,Safari ,支持自动换行*/  
}  
</style> 

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

复制代码 代码示例:
<style type="text/css"> 
div{width:200px;background:red;overflow:hidden;word-wrap:break-word;word-break:normal;}  
</style> 
<div>congratulations  

让长字符自动换行 (比如 URL 和 Email地址):  
 

复制代码 代码示例:
http://www.jb200.com/html/standard/base/81857.html  
SDFG SOME word has spacing...  
XXXXXXXXXXXXDGXXXXXXXXYYYYDFGYYXXXXXXXSDGXXXXXXXXXXXXyXXXXXXXXXXxwhite-space: nowrap  

一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体,可能不会换行  
Web标准化 <a href="http://www.jb200.com" _fcksavedurl="http://www.jb200.com">www.jb200.com</a> 
中文文字 中文文字 中文文字 中文english文字 中文文字 中文english文字 中文english文字 中文english文字 中english字 中english字 中english字 中english字  
</div>

注意:本文介绍的css样式只在IE浏览器中有效。
其它浏览器下暂未测试。