兼容火狐，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

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;/*强制不换行*/

此方法某些浏览器下不兼容

This entry was posted in WEB前端 and tagged Chrome, CSS, firefox. Bookmark the permalink.

月小升QQ 2651044202, 技术交流QQ群 178491360

首发地址：月小升博客 – https://java-er.com/blog/html-break-line-firefox-chrome/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢

巴特西

兼容火狐，Chrome,IE6，IE7，IE8的HTML换行写法

最新文章

热门文章