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


Posted in Javascript onAugust 19, 2007

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形,虽然可以使用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+="<br />\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>

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
学习Angularjs分页指令
Jul 01 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue计算属性及使用详解
Apr 02 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue 如何使用递归组件
Oct 23 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
js类中获取外部函数名的方法
Aug 19 #Javascript
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 #Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 #Javascript
Code: write(s,d) 输出连续字符串
Aug 19 #Javascript
js实现运行代码需要刷新的解决方法
Aug 18 #Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 #Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 #Javascript
You might like
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
详解JavaScript 作用域
2020/07/14 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python实现的各种排序算法代码
2013/03/04 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
繁星春水读书笔记
2015/06/30 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers