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 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
前端jquery部分很精彩
May 03 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
纯JS实现轮播图
Feb 22 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
vue使用监听实现全选反选功能
2018/07/06 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
python将字典内容存入mysql实例代码
2018/01/18 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
中学生演讲稿
2014/04/26 职场文书
车辆工程专业求职信
2014/04/28 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
求职信格式范文
2015/03/19 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书