Rumah > hujung hadapan web > tutorial js > javascript 一个自定义长度的文本自动换行的函数_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 19:09:42
asal
1062 orang telah melayarinya

很多朋友在制作网页过程中总是发现某些时候一些英文会把原来好好的表格撑开而导致变形,虽然可以使用style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 来解决这个问题,但有些时候会导致内容显示不完整而被隐藏了起来,并没有做到自动换行的效果。

于是偶就想写一个这样的函数来修补这个缺陷,这个函数很简单,但这里只是提供一种思路来解决这个问题。

function fnAddBr(id, iPerLineLen){.....} 
id为要修改的文本块的id,iPerLineLen为每行的长度
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



Untitled Document


<script> <BR>//函数功能:在指定长度处自动添加换行符,以英文长度为准,及8代表8个英文或4个汉字 <BR> function fnAddBr(id, iPerLineLen){ <BR> var sStr=document.getElementById(id).innerHTML; <BR> if(sStr.replace(/[^\x00-\xff]/g,"xx").length <= iPerLineLen){ <BR> return -1; <BR> } <br><br> var str=""; <BR> var l=0; <BR> var schar; <BR> for(var i=0;schar=sStr.charAt(i);i++){ <BR> str+=schar; <BR> l+=(schar.match(/[^\x00-\xff]/)!=null?2:1); <BR> if(l>= iPerLineLen){ <BR> str+="<br />\n"; <BR> l=0; <BR> } <BR> } <BR> document.getElementById(id).innerHTML=str; <BR> } <BR> </script>

我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽,很难看; 
我在加了 
style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 

这个代码后,表格倒是不会撑宽了,可是内容又显示不完全了,只是显示表格一样的宽度的内容,其他的被遮挡或是过滤掉了。 
我的是汉字,这个有关系吗? 

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行?或是能换行又不撑大表格,而且不略去内容! 

我的内容是在动易中调用的这个标签!



我在做网页的时候添加的内容在生成网页后总是横向把表格撑的很宽,很难看; 
我在加了 
style="table-layout:fixed;word-wrap:break-word;word-break:break-all" 

这个代码后,表格倒是不会撑宽了,可是内容又显示不完全了,只是显示表格一样的宽度的内容,其他的被遮挡或是过滤掉了。 
我的是汉字,这个有关系吗? 

请问有什么方法可以让在表格中的文字到多少字的时候就自动换一行?或是能换行又不撑大表格,而且不略去内容! 

我的内容是在动易中调用的这个标签!


<script> <BR> fnAddBr("content",25); <BR> fnAddBr("content1",50); <BR></script>


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan