javascript實現的一個自定義長度的文本自動換行的函數。

2019-11-21 01:56:51

字體：大中小

來源：轉載

供稿：網友

很多朋友在制作網頁過程中總是發現某些時候一些英文會把原來好好的表格撐開而導致變形，雖然可以使用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   class="iwvjtn8m0"   id="content" style="border:1px solid #ccc">  我在做網頁的時候添加的內容在生成網頁后總是橫向把表格撐的很寬，很難看；   我在加了   style="table-layout:fixed;word-wrap:break-word;word-break:break-all"   這個代碼后，表格倒是不會撐寬了，可是內容又顯示不完全了，只是顯示表格一樣的寬度的內容，其他的被遮擋或是過濾掉了。   我的是漢字，這個有關系嗎？   請問有什么方法可以讓在表格中的文字到多少字的時候就自動換一行？或是能換行又不撐大表格，而且不略去內容！   我的內容是在動易中調用的這個標簽！  </div>  <div   class="iwvjtn8m0"   id="content1" style="border:1px solid #ccc">  我在做網頁的時候添加的內容在生成網頁后總是橫向把表格撐的很寬，很難看；   我在加了   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需刷新才能執行]

上一篇：javascript模仿百萬格子小的一小段代碼

下一篇：javascript按指定格式輸出文件最后更新時間