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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
javascript 写类方式之五
Jul 05 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
js自定义select下拉框美化特效
May 12 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
es6学习笔记之Async函数基本教程
May 11 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
vue使用echarts画组织结构图
Feb 06 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php多任务程序实例解析
2014/07/19 PHP
smarty中post用法实例
2014/11/28 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
js数组操作学习总结
2013/11/04 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
python实现聚类算法原理
2018/02/12 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
《小小竹排画中游》教学反思
2014/02/26 职场文书
学校创先争优活动总结
2014/08/28 职场文书
升国旗演讲稿
2014/09/05 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫