firefox css自動(dòng)換行的實(shí)現(xiàn)方法
更新時(shí)間:2008年08月08日 12:44:04 作者:
越發(fā)感覺(jué)網(wǎng)頁(yè)設(shè)計(jì)人員的辛苦,就一個(gè)自動(dòng)換行,
IE直接用:
word-break:break-all; /*允許詞內(nèi)換行*/
word-wrap:break-word; /*內(nèi)容將在邊界內(nèi)換行*/
/*需要注意的默認(rèn)是:*/
word-wrap:normal /*允許內(nèi)容頂開(kāi)指定的窗口邊界*/
而firefox卻沒(méi)有很好的實(shí)現(xiàn)辦法 ,一個(gè)折中方案就是使用滾動(dòng)條,但網(wǎng)上也提出了一種用js來(lái)判斷換行的辦法,這里摘錄下(轉(zhuǎn)自網(wǎng)絡(luò),特此說(shuō)明)。 JavaScript復(fù)制代碼
<script type="text/javascript">
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
注:以上腳本放在</head>前面.
同個(gè)頁(yè)面單處調(diào)用:
<div id="content">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60, "content");</script>
同個(gè)頁(yè)面多處調(diào)用:
<div id="content">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60,"content");</script>
<div id="content2">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60,"content2");</script>
注:把應(yīng)用的JS寫(xiě)在</div>后面,其中60表示一行要顯示多少字字符,注意多個(gè)調(diào)用時(shí)ID的相應(yīng)變化,不能同一個(gè)ID名稱(chēng),應(yīng)用上面的方法后IE也會(huì)是按設(shè)定的字符數(shù)換行,但是IE里面支持自動(dòng)換行,所以只要判斷一下是否為IE,如果不是IE就不要輸出上面的 XML/HTML復(fù)制代碼
<script language="javascript">toBreakWord(60, "content");</script>
這段JS,如果不是就要輸出。代碼未經(jīng)測(cè)試,偶只看了思路,有需要的自己去調(diào)試吧!有錯(cuò)誤給我留言。
word-break:break-all; /*允許詞內(nèi)換行*/
word-wrap:break-word; /*內(nèi)容將在邊界內(nèi)換行*/
/*需要注意的默認(rèn)是:*/
word-wrap:normal /*允許內(nèi)容頂開(kāi)指定的窗口邊界*/
而firefox卻沒(méi)有很好的實(shí)現(xiàn)辦法 ,一個(gè)折中方案就是使用滾動(dòng)條,但網(wǎng)上也提出了一種用js來(lái)判斷換行的辦法,這里摘錄下(轉(zhuǎn)自網(wǎng)絡(luò),特此說(shuō)明)。 JavaScript復(fù)制代碼
<script type="text/javascript">
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
注:以上腳本放在</head>前面.
同個(gè)頁(yè)面單處調(diào)用:
<div id="content">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60, "content");</script>
同個(gè)頁(yè)面多處調(diào)用:
<div id="content">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60,"content");</script>
<div id="content2">這里是要應(yīng)用換行的內(nèi)容</div><script type="javascript">toBreakWord(60,"content2");</script>
注:把應(yīng)用的JS寫(xiě)在</div>后面,其中60表示一行要顯示多少字字符,注意多個(gè)調(diào)用時(shí)ID的相應(yīng)變化,不能同一個(gè)ID名稱(chēng),應(yīng)用上面的方法后IE也會(huì)是按設(shè)定的字符數(shù)換行,但是IE里面支持自動(dòng)換行,所以只要判斷一下是否為IE,如果不是IE就不要輸出上面的 XML/HTML復(fù)制代碼
<script language="javascript">toBreakWord(60, "content");</script>
這段JS,如果不是就要輸出。代碼未經(jīng)測(cè)試,偶只看了思路,有需要的自己去調(diào)試吧!有錯(cuò)誤給我留言。
相關(guān)文章
20個(gè)優(yōu)秀CSS網(wǎng)站(3月精選)
20個(gè)優(yōu)秀CSS網(wǎng)站(3月精選)...2007-03-03一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)
一個(gè)老外弄的Clearing floats(清除浮動(dòng)的方法)...2007-09-09引用字體時(shí)圖標(biāo)無(wú)法顯示_字體文件不存在問(wèn)題
最近一個(gè)項(xiàng)目,css,js等靜態(tài)資源做了cdn部署,瀏覽網(wǎng)站時(shí)發(fā)現(xiàn)font?awesome字體圖標(biāo)通通不能正常顯示。只有一些奇怪的符號(hào)。瀏覽器控制臺(tái)報(bào)錯(cuò)信息:font-face引用字體跨域。2023-06-06scrollWidth,clientWidth與offsetWidth的區(qū)別
scrollWidth,clientWidth與offsetWidth的區(qū)別...2007-08-08學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)
學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)...2007-09-09