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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Vue渲染过程浅析
Mar 14 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 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
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JavaScript中Dom操作实例详解
2019/07/08 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python批量发送post请求的实现代码
2018/05/05 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库