As a programmer, often need to face a problem is in the news, such as information in the title list, often in order to adapt to the width of the table, the need for the long title of the text to intercept and at the end of the truncated text with ellipses.
As we all know, there are many ways to achieve this function, javascript,asp,php have their own implementation methods, but there are many problems, such as mixed in English or in some coding, easy to cause the interception of garbled problems, although most of the problems have been more mature solutions, However, when the amount of data is large, the use of javascript,asp,php to achieve this function, will undoubtedly give the client or server side caused a relatively large resource costs.
With the popularity of the popular, many sites are in the traditional form into the layout of the div+css, I studied the CSS and div Some features, found a more interesting CSS, after a series of research and experiments, found a use of div+ CSS to implement this function of the alternative method, this method in my test can be no problem, and good compatibility with a variety of coding and Chinese and English mixed-row situation.
Methods in Div:
< DIV style="width:200px; border:1px dashed red; Overflow:hidden; Text-overflow:ellipsis ">
<nobr> is like a line of text, very long, a row in the table does not show .</nobr>
<nobr> A is for example a line of text, very long, a row in the table does not appear .</nobr>
<nobr> 1 is like a line of text, very long, a row in the table does not appear .</nobr>
<nobr> F is for example a line of text, very long, a row in the table does not appear .</nobr>
<nobr> is like you Pig Very Very Very much.<
</div>
Methods in table:
< table style= table-layout:fixed;border-collapse: collapse;font-size:12px; " border= "1" width= "" bordercolor= #666666 >
tr>
td nowrap style= "overflow:hidden;text-overflow:ellipsis;" > Content Content Contents content content content content content content content content content contents content; / td>
/
Tr> / table> The the
Code is simple and should basically be easy to see , mainly in the "Text-overflow" attribute, this property has 2 values, respectively, "ellipsis" and "clip", simple understanding, the first value will be intercepted at the end of the text with the ellipsis, the second value will not.
This method at present I have not found any bug,css control, nor does it cause too much overhead, self feeling, is a useful method!
