当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 一个自定义长度的文本自动换行的函数

Javascript
将HTML自动转为JS代码
一端时间轮换的广告
制作特殊字的脚本
美化下拉列表
文字幻灯片
判断是否输入完毕再激活提交按钮
JS控制表格隔行变色
左右两侧的广告代码 简单
父窗口获取弹出子窗口文本框的值
网页的标准,IMG不支持onload标签怎么办
一个很简单的办法实现TD的加亮效果.
文本框栏目介绍
自动检查并替换文本框内的字符
会自动逐行上升的文本框
列表内容的选择
对textarea框的代码调试,而且功能上使用非常方便,酷
提高代码性能技巧谈—以创建千行表格为例
Javascript的IE和Firefox兼容性汇编
让插入到 innerHTML 中的 script 跑起来
DEFER怎么用?

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 210 ::
收藏到网摘: n/a

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