Home > Developer > Web Develop
Reference study: Http://www.cnblogs.com/lianjun/archive/2011/03/24/1993479.html
Initial practice in the project (JS Intercept):
//character length interception includes mixed Chinese and EnglishfunctionsubStr (str, len) {str=str.tostring (); varNewlength = 0; varNewstr = ""; varChineseregex =/[^\x00-\xff]/G; varSinglechar = ""; varStrlength = str.replace (Chineseregex, "* *"). length; for(vari = 0;i < strlength;i++) {Singlechar=Str.charat (i). toString (); if(Singlechar.match (chineseregex)! =NULL) {Newlength+ = 2; }Else{newlength++; } if(Newlength >Len) { Break; } newstr+=Singlechar; } if(Strlength >Len) {Newstr+= "..."; } returnNewstr;}
But found inadvertently found that the CSS actually has a container width automatically intercept length plus ellipsis function, and do not have to call the JS method to intercept the string. Especially in the table with more data, the JS method is called to the columns in each row, which causes the page load time, affects the system performance, and leads to insufficient user experience. But it will add a bit of server traffic. Use can be measured according to the situation.
text-overflow : Clip | Ellipsis
Value:
Description
For information on how the Text-overflow attribute is applied, we explain the following:
Text-overflow:ellipsis;
Overflow:hidden;
White-space:nowrap;
Width:200px; (width of the label container)
The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.
The method in the Div
<div style= "width:200px; border:1px dashed red; Overflow:hidden; Text-overflow:ellipsis ">
<NOBR> For example, there is a line of text, very long, a row in the table does not show .</nobr>
<NOBR> A is like a line of text, very long, a row in the table does not show .</nobr>
<NOBR> 1 For example, there is a line of text, very long, the table is not displayed in a row .</nobr>
<NOBR> F is for example, there is a line of text, very long, a row in the table does not show .</nobr>
<NOBR> is like you Pig Very Very Very much.</nobr>
</DIV>
Methods in table
<table style= "table-layout:fixed;border-collapse:collapse;font-size:12px;" border= "1" width= "200" Bordercolor= #666666 >
<TR>
<TD nowrap style= "overflow:hidden;text-overflow:ellipsis;" Content content Contents content content of Contents content content contents content Contents content Contents Content contents content contents The content of the text content contents, contents of the contents </TD>
</TR>
</TABLE>
Example:
<!DOCTYPE HTML><HTML><Head><title>Text-overflow Demo</title><MetaCharSet=utf-8 "/><style>. Test_demo_clip{Text-overflow:Clip;Overflow:Hidden;White-space:nowrap;width:200px;background:#ccc;}. Test_demo_ellipsis{Text-overflow:ellipsis;Overflow:Hidden;White-space:nowrap;width:200px;background:#ccc;}</style></Head><Body><H2>Text-overflow:clip</H2> <Divclass= "Test_demo_clip">does not display ellipsis, but a simple trimming bar</Div><H2>Text-overflow:ellipsis</H2><Divclass= "Test_demo_ellipsis">show ellipsis when text inside an object overflows</Div></Body></HTML>
Demo Result:
CSS actually has according to the container width automatic interception length plus ellipsis function, powerful!!
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
