Home > Web Front-end > JS Tutorial > javascript A function to automatically wrap text with a custom length_javascript skills

javascript A function to automatically wrap text with a custom length_javascript skills

WBOY
Release: 2016-05-16 19:09:42
Original
1058 people have browsed it

In the process of making web pages, many friends always find that sometimes some English words will stretch out the original tables and cause deformation. Although you can use style="table-layout:fixed;word-wrap:break-word;word-break :break-all" to solve this problem, but sometimes it will cause the content to be displayed incompletely and be hidden, and the automatic line wrapping effect will not be achieved.

So I wanted to write a function like this to fix this defect. This function is very simple, but here I just provide an idea to solve this problem.

function fnAddBr(id, iPerLineLen){.....}
id is the id of the text block to be modified, iPerLineLen is the length of each line
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



Untitled Document





The content I added when making the web page always made the table very wide horizontally after generating the web page, which was ugly;
I added
style="table-layout:fixed;word-wrap: break-word;word-break:break-all"

After this code, the table will not be stretched wide, but the content will not be fully displayed. Only the content with the same width as the table will be displayed, and the other content will be displayed. Blocked or filtered out.
Mine is in Chinese characters, does it matter?

Is there any way to automatically change the text in the table to a new line when it reaches a certain number of words? Or it can wrap lines without making the table too large, and without omitting content!

My content is called this tag in Dongyi!




The content I added when making the web page always makes the table very wide horizontally after generating the web page, which is ugly;
I am adding After adding
style="table-layout:fixed;word-wrap:break-word;word-break:break-all"

this code, the table will not be stretched, but the content will be The display is not complete, only the content with the same width as the table is displayed, and the other content is blocked or filtered out.
Mine is in Chinese characters, does it matter?

Is there any way to automatically change the text in the table to a new line when it reaches a certain number of words? Or it can wrap lines without making the table too large, and without omitting content!

My content is called this tag in Dongyi!





<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> <script> <BR> fnAddBr("content",25); <BR> fnAddBr("content1",50); <BR></script>
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template