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+json实现的搜索加分页效果
Mar 31 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vscode自定义vue模板的实现
Jan 27 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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php除数取整示例
2014/04/24 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
html下载本地
2006/06/19 Javascript
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
pymysql 开启调试模式的实现
2019/09/24 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
法国家具及室内配件店:home24
2017/01/21 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
四种会话跟踪技术
2015/05/20 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
运动会加油稿100字
2014/09/19 职场文书
服务整改报告
2014/11/06 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL