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学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python爬虫可以爬什么
2020/06/16 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
家庭教育的心得体会
2014/09/01 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
安全教育培训心得体会
2016/01/15 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书