javascript实现的一个自定义长度的文本自动换行的函数。

更新时间：2007年08月28日 20:36:42 作者：

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形，虽然可以使用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="border:1px solid #ccc">  我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽，很难看；   我在加了   style="table-layout:fixed;word-wrap:break-word;word-break:break-all"   这个代码后，表格倒是不会撑宽了，可是内容又显示不完全了，只是显示表格一样的宽度的内容，其他的被遮挡或是过滤掉了。   我的是汉字，这个有关系吗？   请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行？或是能换行又不撑大表格，而且不略去内容！   我的内容是在动易中调用的这个标签！  </div>  <div 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实现的一个自定义长度的文本自动换行的函数。

原生js实现弹动小球效果
这篇文章主要为大家详细介绍了原生js实现弹动小球效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
微信小程序学习总结（四）事件与冒泡实例分析
这篇文章主要介绍了微信小程序学习总结（四）事件与冒泡,结合实例形式分析了微信小程序事件、冒泡、数据获取相关机制、原理与操作注意事项,需要的朋友可以参考下
2020-06-06
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
最近支付宝的领红包可真是刷爆了各个微信群啊，满群都是支付宝口令,可是这样推广很麻烦，下面小编给大家带来了js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能，需要的朋友参考下
2018-01-01
textarea支持图形编辑的实现方法
本来以为只有iframe支持编辑了，今天突然发现textarea也支持编辑：（是不是我太愚钝了？ textarea不能用innerHTML来插入html，而用appendChild 这样的话稍微修改下，评论等简单的textarea的表情插入就可以直接显示出来了而不是只显示emot了比较实用标题起的确切，但如果叫“现textarea支持编辑”似乎更废话
2008-03-03
javascript实现验证身份证号的有效性并提示
下面分享的JS脚本是我用过的最完善的身份证号的验证程序了，因为只有真正的身份证号才能被通过，小伙伴们可以试试。直接复制运行。
2015-04-04
JavaScript html5 canvas画布中删除一个块区域的方法
这篇文章主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及JavaScript结合html5操作canvas画布图形绘制的技巧,需要的朋友可以参考下
2016-01-01
微信小程序上传图片功能（附后端代码）
这篇文章主要为大家详细介绍了微信小程序上传图片功能，还为大家分享了后端代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
Cordova(ionic)项目实现双击返回键退出应用
这篇文章主要为大家详细介绍了Cordova项目实现双击返回键退出应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
php 解压zip压缩包内容到指定目录的实例
下面小编就为大家分享一篇php 解压zip压缩包内容到指定目录的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
6种javascript显示当前系统时间代码
这篇文章主要介绍了6种javascript显示当前系统时间代码，欢迎大家学习借鉴
2015-12-12