很多朋友在製作網頁過程中總是發現某些時候一些英文會把原來好好的表格撐開而導致變形,雖然可以使用style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 來解決這個問題,但有些時候會導致內容顯示不完整而被隱藏了起來,並沒有做到自動換行的效果。
於是偶就想寫一個這樣的函數來修補這個缺陷,這個函數很簡單,但這裡只是提供一種思路來解決這個問題。
function fnAddBr(id, iPerLineLen){.....}
id為要修改的文字區塊的id,iPerLineLen為每行的長度
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> </head> <body> <script type="text/javascript"> //函數功能:在指定長度處自動添加分行符號,以英文長度為準,及8代表8個英文或4個漢字 function fnAddBr(id, iPerLineLen){ var sStr=document.getElementById(id).innerHTML; if(sStr.replace(/[^\x00-\xff]/g,"xx").length <= iPerLineLen){ return -1; } var str=""; var l=0; var schar; for(var i=0;schar=sStr.charAt(i);i++){ str+=schar; l+=(schar.match(/[^\x00-\xff]/)!=null?2:1); if(l>= iPerLineLen){ str+="\n"; l=0; } } document.getElementById(id).innerHTML=str; } </script> <div id="content" > 我在做網頁的時候添加的內容在產生網頁後總是橫向把表格撐的很寬,很難看; 我在加了 style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 這個代碼後,表格倒是不會撐寬了,可是內容又顯示不完全了,只是顯示表格一樣的寬度的內容,其他的被遮擋或是過濾掉了。 我的是漢字,這個有關係嗎? 請問有什麼方法可以讓在表格中的文字到多少字的時候就自動換一行?或是能換行又不撐大表格,而且不略去內容! 我的內容是在動易中調用的這個標籤! </div> <div id="content1" > 我在做網頁的時候添加的內容在產生網頁後總是橫向把表格撐的很寬,很難看; 我在加了 style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 這個代碼後,表格倒是不會撐寬了,可是內容又顯示不完全了,只是顯示表格一樣的寬度的內容,其他的被遮擋或是過濾掉了。 我的是漢字,這個有關係嗎? 請問有什麼方法可以讓在表格中的文字到多少字的時候就自動換一行?或是能換行又不撐大表格,而且不略去內容! 我的內容是在動易中調用的這個標籤! </div> <script type="text/javascript"> fnAddBr("content",25); fnAddBr("content1",50); </script> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]