java多线程    Java入门    vsftp    ftp    linux配置    centos    FRP教程    HBase    Html5缓存    webp    zabbix    分布式    neo4j图数据库    

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

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

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


This entry was posted in WEB前端 and tagged , , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/html-break-line-firefox-chrome/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力.

Leave a Reply