兼容火狐，Chrome,IE6，IE7，IE8的HTML换行写法
本文链接：https://java-er.com/blog/html-break-line-firefox-chrome/
兼容火狐，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;/*强制不换行*/
此方法某些浏览器下不兼容
首发地址：月小升博客 – https://java-er.com/blog/html-break-line-firefox-chrome/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢
