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 相关文章推荐
JQuery中getJSON的使用方法
Dec 13 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
vue 自定义右键样式的实例代码
Nov 06 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP学习之整理字符串
2011/04/17 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
解决Python requests 报错方法集锦
2017/03/19 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
送给客户微信问候语!
2019/07/04 职场文书