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实现的一个自定义长度的文本自动换行的函数。

分享11个常用JavaScript小技巧
在我们的日常开发过程中，我们经常会遇到数字与字符串转换，检查对象中是否存在对应值，条件性操作对象数据，过滤数组中的错误值，等等这类处理。本文整理出了一些常用的小技巧，希望大家能喜欢
2022-06-06
js获取对象、数组的实际长度,元素实际个数的实现代码
下面小编就为大家带来一篇js获取对象、数组的实际长度,元素实际个数的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
javascript数组去重的方法汇总
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下分享给大家。
2015-04-04
js实现非常简单的焦点图切换特效实例
这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
2015-05-05
javascript显示动态时间的方法汇总
本文给大家汇总介绍了3种javascript实现动态显示时间的方法及详细示例，有需要的小伙伴可以参考下
2018-07-07
js 翻转颜色实现代码
将#ffffff转换成rgb(0,0,0)格式的颜色代码，需要的朋友可以参考下。
2010-03-03
基于JavaScript实现网红太空人表盘的完整代码
这篇文章主要介绍了基于JavaScript实现网红太空人表盘的完整代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-03-03
JS是按值传递还是按引用传递
在分析这个问题之前，我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。
2015-01-01
封装了一个自动生成渐变字的JS类(clip)
之前做过一个生成渐变字体的简单演示今天闲着没事就把这个功能完善了，把JS代码封装成一个类，载入页面就可以使相应的HTML元素内部的字体产生渐变色。
2008-11-11
js异步之async和await实现同步写法
本文主要介绍了js异步之async和await实现同步写法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具