您的位置：首页 > Web前端 > CSS

css text 自动换行的实现方法 Internet Explorer,Firefox,Opera,Safar

2010-11-18 20:22 441 查看

代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
6 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
7 <title>css自动换行的实现方法 Internet Explorer,Firefox,Opera,Safari</title>
8 <meta name="Author" content="涂聚文 Geovin Du" />
9 <meta name="Keywords" content= " css, Cascading, Style, Sheets " />
<meta name="Description" content="CSS -Cascading Style Sheets. " />
<link rel="shortcut icon" href="http://www.dupcit.com/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.dupcit.com/favicon.ico" type="image/ico" />

<script type="text/javascript">
//计算文本,参数为:显示文本长度,层ID
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
<style type="text/css">
/**/
.intro{
position:absolute;
color:white;
background:#d29b5a;
font-size:14px;
width:120px;
line-height:20px;
height:119px;
padding:5px;
margin:8px 0px 0px 10px;
text-align:left;
word-break:break-all; /*IE 允许词内换行*/
word-wrap:break-word; /*IE 内容将在边界内换行*/
overflow:auto;

}
</style>

</head>

<body>
<div class="intro">人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种整合,学习是一种成长.--涂聚文</div>
<script type="javascript">toBreakWord(10, "intro");</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航