Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 19:09:42
original
1029 Les gens l'ont consulté

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


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal