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 相关文章推荐
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
一篇文章学会Vue中间件管道
Jun 20 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之第三天
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
python中return的返回和执行实例
2019/12/24 Python
Python定义一个函数的方法
2020/06/15 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
生产内勤岗位职责
2013/12/07 职场文书
给导游的表扬信
2014/01/10 职场文书
干部下基层实施方案
2014/03/14 职场文书
教研处工作方案
2014/05/26 职场文书
2015年团支书工作总结
2015/04/03 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android