兼容火狐,Chrome,IE6,IE7,IE8的HTML换行写法
1.任意数据自动强制换行
<div id="ff" style="border: 1px solid #f00; width: 300px; word-wrap: break-word;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">// <![CDATA[
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
// ]]></script>
此方法按字数自动截取。缺点是如果一个单词比如hello 可能被换行为
#####he
llo
2.pre标签
<pre></pre>
的内部换行
写CSS
<pre>pre{
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap;/*Mozilla,since1999*/
white-space:-pre-wrap;/*Opera4-6*/
white-space:-o-pre-wrap;/*Opera7*/
word-wrap:break-word;/*InternetExplorer5.5+*/ }</pre>
3.CSS 强制一个元素内内容换行
word-break: break-all;/*强制换行*/
word-break: keep-all;/*强制不换行*/
此方法某些浏览器下不兼容