javascript 一个自定义长度的文本自动换行的函数

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形，虽然可以使用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>

赞 (0)

相关推荐

  • print不自动换行，puts会自动换行第1/2页

    1.print不自动换行,puts会自动换行,一行不够写的话,可以加"\"进行连接 ruby 代码 puts 6/2 print 6/1 puts 'hello world' puts '我们都是'\ '中国人' 运行结果: ruby 代码 3 6hello world 我们都是中国人 2.==,eql?,equal? 区别 ==值相等 eql?值相等,类型相等 equal?值相等,内存地址相等 a=1 b=1.0 c=1.0 d=1.0 e=c puts(a==b)#值相等 puts

  • CSS控制文本自动换行的问题

    用表格做网页排版的时候,一般都能正常使用.偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:( 总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了. table{table-layout: fixed;} td(word-break: break-all; word-wrap:break-word;) 注释一下: 1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行. 2.td{word-

  • javascript实现的一个自定义长度的文本自动换行的函数。

    很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形,虽然可以使用style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 来解决这个问题,但有些时候会导致内容显示不完整而被隐藏了起来,并没有做到自动换行的效果. 于是偶就想写一个这样的函数来修补这个缺陷,这个函数很简单,但这里只是提供一种思路来解决这个问题. function fnAddBr(id, iPerLineLen){.

  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    复制代码 代码如下: irefox中连续英文字符如果要CSS控制强制换行,探索了N久,发现是实现不了的逼不得已的时候就用js脚本进行控制吧 英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox兼容解决办法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  • Flex Label自动截取、自动换行代码

    复制代码 代码如下: label.maxDisplayedLines=0; // 默认多行显示,不截取 label.maxDisplayedLines=1; //任意整数,显示单行文本,自动截取(...) label.maxDisplayedLines=2; //撑满label,可多行,显示不了的截取(...)

  • Eclipse 格式化代码时不换行与自动换行的实现方法

    1.preferences->Java->Code Style->Code Formatter->Show... ,打开之后,选择"Line Wrapping"选项卡,在"Maximun line width"指定大于多少列时换行. 2.还是在"Line Wrapping"选项卡中,能过选择"Line Wrapping policy"可以指定构造函数.方法体等的换行情况. 不过,SUN推荐的编码风格默认

  • JavaMe开发绘制可自动换行文本

    JavaMe开发绘制可自动换行文本

    [问题描述] JavaMe Graphics类中的drawString不支持文本换行,这样绘制比较长的字符串时,文本被绘制在同一行,超过屏幕部分的字符串被截断了.如何使绘制的文本能自动换行呢? [分析] drawString无法实现自动换行,但可以实现文本绘制的定位.因此可考虑,将文本拆分为多个子串,再对子串进行绘制.拆分的策略如下: 1 遇到换行符,进行拆分: 2 当字符串长度大于设定的长度(一般为屏幕的宽度),进行拆分. [步骤] 1 定义一个String和String []对象: priv

  • ASP.NET Datagridview自动换行的小例子

    复制代码 代码如下: protected void AxGridView1_RowDataBound(object sender, GridViewRowEventArgs e)    {        //设置所有列不允许换行        //AxGridView1.Attributes.Add("style", "word-break:keep-all;word-wrap:false");        //设置所有列自动换行        AxGridVie

  • Discuz 公告效果（自动换行，无间隙滚动）

    ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } #announcement { width:100%; background:url(img/menu_bg.gif) repeat; overflow: hidden; } #announcement div { border: #e6e6e6 1px solid; padding:0px 10px 0

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

随机推荐