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之AOP编程实例
Jul 17 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 Javascript
element中table高度自适应的实现
Oct 21 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
How do I change MySQL timezone?
2008/03/26 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jQuery中:text选择器用法实例
2015/01/03 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python实现自动上京东抢手机
2018/02/06 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python打造爬虫代理池过程解析
2019/08/15 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
小区文明倡议书
2014/05/16 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
资产运营委托书范本
2014/10/16 职场文书
五好家庭事迹材料
2014/12/20 职场文书
大学开学感言
2015/08/01 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
SQL注入详解及防范方法
2021/12/06 MySQL