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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
Webpack实战加载SVG的方法
Dec 26 Javascript
TypeScript之调用栈的实现
Dec 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
常见的PHP五种设计模式小结
2011/03/23 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
深入浅析python继承问题
2016/05/29 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
用pandas中的DataFrame时选取行或列的方法
2018/07/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
二年级数学教学反思
2014/01/21 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
团队拓展活动总结
2014/08/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
社区节水倡议书
2015/04/29 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
七年级作文之冬景
2019/11/07 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers