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 28 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
小程序图片长按识别功能的实现方法
Aug 30 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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
Vue异步加载about组件
2017/10/31 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
浅谈Python 中整型对象的存储问题
2016/05/16 Python
Python与R语言的简要对比
2017/11/14 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
实习生自我鉴定范文
2013/12/05 职场文书
室内趣味活动方案
2014/08/24 职场文书
党员三严三实心得体会
2014/10/13 职场文书
民主生活会汇报材料
2014/12/15 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python