As a programmer, one of the problems that often needs to be faced is that in the title list of news and other information, often in order to accommodate the width of the table, it is necessary to intercept the long title text and add an ellipsis at the end of the truncated text.
As we all know, there are many ways to realize this function, javascript,asp,php have their own implementation methods, but there are many problems, such as mixed in Chinese and English or under some coding, it is easy to cause the interception of garbled problems, although most of the problems have more mature solutions, However, when the data volume is relatively large, the use of javascript,asp,php to achieve this function, the client or server side will undoubtedly cause a relatively large resource overhead.
With the popularity of the Internet, many Web sites are going to transform the traditional form into a div+css layout, I studied the CSS and div features, found a more interesting CSS, after a series of research and experiments, found a use div+ CSS implementation of this function of the alternative method, this method in my ability to test is no problem, and good compatibility with a variety of coding and mixed in Chinese and English situation.
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= " the" 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 >
The code is very simple, basically it should be easy to see, mainly in the "Text-overflow" property, this property has 2 values, namely "ellipsis" and "clip", simple understanding, the first value will be intercepted after the end of the text with an ellipsis, the second value will not.
This method at present I have not found any bug,css control, also do not cause too much overhead, self-feeling, is a useful method!
