兼容火狐，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;/*强制不换行*/

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

• CSS 图片毛玻璃效果
• Chrome隐私模式是什么，Chrome隐私模式如何保护我的隐私
• Chrome浏览器Network性能调试
• python2.7 安装node-clean-css
• xmarks同步插件chrome无法搜索到怎么办
• 网页字体，css中文英文对照
• FireFox chrome 模拟手机浏览器 调试手机网页
• 网络监控-Firebug中请求各阶段时间详细解释
• 搞定chrome WangWang plugin in无法加载
• FireFox缓存文件搜索插件
• FireFox调试网络请求组件 HttpRequester
• FireBug onload时间的意义

---

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/
无特殊说明，文章均为月小升原创，欢迎转载，转载请注明本文地址，谢谢