Home > Developer > JavaScript
Many of my friends always find that some English will open the original good table and cause deformation during webpage creation. Although style = "table-layout: fixed; word-wrap: can be used: break-word; word-break: break-all "to solve this problem, but sometimes the content is hidden due to incomplete display, and the effect of automatic line feed is not achieved.
So I want to write a function like this to fix this defect. This function is very simple, but it only provides a way to solve this problem.
Function fnAddBr (id, iPerLineLen ){.....}
Id is the id of the text block to be modified, and iPerLineLen is the length of each line.
<! 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">
// Function: automatically add a line break at the specified length. The line break is subject to the English length and 8 represents 8 English or 4 Chinese characters.
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">
The content I added when creating a webpage is always wide and ugly after the webpage is generated;
I added
Style = "table-layout: fixed; word-wrap: break-word; word-break: break-all"
After this code, the table does not support width, but the content is not completely displayed. It only displays the content with the same width as the table, and other content is blocked or filtered out.
I have Chinese characters. Does it matter?
Is there any way to change the number of words in the table automatically? Or you can wrap a line without a large table, and skip the content!
My content is called in the ease of operation!
</Div>
<Div id = "content1" style = "border: 1px solid # ccc">
The content I added when creating a webpage is always wide and ugly after the webpage is generated;
I added
Style = "table-layout: fixed; word-wrap: break-word; word-break: break-all"
After this code, the table does not support width, but the content is not completely displayed. It only displays the content with the same width as the table, and other content is blocked or filtered out.
I have Chinese characters. Does it matter?
Is there any way to change the number of words in the table automatically? Or you can wrap a line without a large table, and skip the content!
My content is called in the ease of operation!
</Div>
<Script type = "text/javascript">
FnAddBr ("content", 25 );
FnAddBr ("content1", 50 );
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
