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

代码

 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 "   />
10  < meta  name ="Description"  content ="CSS -Cascading Style Sheets. "   />
11  < link  rel ="shortcut icon"  href ="http://www.dupcit.com/favicon.ico"  type ="image/x-icon"   />
12  < link  rel ="icon"  href ="http://www.dupcit.com/favicon.ico"  type ="image/ico"   />
13 
14  < script  type ="text/javascript" >
15  // 计算文本,参数为:显示文本长度,层ID
16  function  toBreakWord(intLen, id){
17  var  obj = document.getElementById(id);
18  var  strContent = obj.innerHTML;
19  var  strTemp = "" ;
20  while (strContent.length > intLen){
21  strTemp += strContent.substr( 0 ,intLen) + " <br> " ;
22  strContent = strContent.substr(intLen,strContent.length);
23  }
24  strTemp +=  strContent;
25  obj.innerHTML = strTemp;
26  }
27  </ script >  
28    < style  type ="text/css" >
29    /**/
30   .intro {
31  position : absolute ;
32  color : white ;
33  background : #d29b5a ;
34  font-size : 14px ;
35  width : 120px ;
36  line-height : 20px ;
37  height : 119px ;
38  padding : 5px ;
39  margin : 8px 0px 0px 10px ;
40  text-align : left ;
41  word-break : break-all ;   /* IE 允许词内换行 */
42  word-wrap : break-word ;   /* IE 内容将在边界内换行 */  
43  overflow : auto ;
44 
45  }
46    </ style >
47 
48 
49  </ head >
50 
51  < body >
52  < div  class ="intro" > 人生是一种心境,生活是一种艺术,成功是一种心态,幸福是一种感觉,竞争是一种建构,情感是一种整合,学习是一种成长.--涂聚文 </ div >
53  < script  type ="javascript" > toBreakWord( 10 ,  " intro " ); </ script >  
54  </ body >
55 
56  </ html >
57