当前位置:沸点梦工场 > WEB标准&DIV+CSS教程 > 浏览文章

用css让长字符自动换行

59HOT收集整理 2008年07月02日 【字体:

让长字符自动换行 (比如 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.div-css.com/html/standard/base/81857.html   
SDFG SOME word has spacing...   
XXXXXXXXXXXXDGXXXXXXXXYYYYDFGYYXXXXXXXSDGXXXXXXXXXXXXyXXXXXXXXXXxwhite-space: nowrap   
一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体一些中文字体,可能不会换行   
Web标准化 <a href="http://www.div-css.com" _fcksavedurl="http://www.div-css.com">www.div-css.com</a>  
中文文字 中文文字 中文文字 中文english文字 中文文字 中文english文字 中文english文字 中文english文字 中english字 中english字 中english字 中english字   
</div>