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 数组排序函数
Aug 20 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 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
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
第一个Vue插件从封装到发布
2017/11/22 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python连接数据库的方法
2017/10/19 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
用python与文件进行交互的方法
2018/03/01 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
优秀毕业生求职信范文
2014/01/02 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
大学生自我鉴定书
2014/03/24 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
金融与证券专业求职信
2014/06/22 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL