Solutions to the problem of omitting the intercept of Chinese and English strings with CSS

As a programmer, a common problem is that in the Title List of news and other information, to adapt to the width of the table, you need to intercept long headers and add ellipsis at the end of the intercepted text.

As we all know, there are many ways to implement this function. JavaScript, ASP, and PHP all have their own implementation methods, but there are many problems, such as mixing Chinese and English or under some encoding, it is easy to cause garbled characters in interception. Although most problems have mature solutions, JavaScript, ASP, and PHP are used to implement this function when the data volume is large, it will undoubtedly cause large resource overhead to the client or server.

With the increasing popularity of W3C, many websites are transforming traditional tables into DIV + CSS la S. When I study some features of CSS and DIV, I found an interesting CSS. After a series of research and experiments, I found an alternative method to implement this function using DIV + CSS. This method is no problem in my tests, it is well compatible with various codes and mixed Chinese and English.

Method in Div:

<Div style = "width: 200px; border: 1px dashed red; overflow: hidden; text-overflow: ellipsis">
<NOBR> for example, a row of text is long and cannot be displayed in a table. </NOBR>
<NOBR> For example, a has a line of text, which is very long and cannot be displayed on a line in the Table. </NOBR>
<NOBR> for example, a row of text is long, and a row in the table cannot be displayed. </NOBR>
<NOBR> for example, F has a line of text, which is very long and cannot be displayed on a line in the Table. </NOBR>
<NOBR> it is Like You Pig Very Much. </NOBR>
</DIV>

Method 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 </TD>
</TR>
</TABLE>

The code is very simple. It should be easy to understand, mainly because of the "text-overflow" attribute, which has two values: "ellipsis" and "clip ", simply put, the first value will be appended with a ellipsis at the end of the text after the interception, and the second value will not.

At present, I have not found any bugs in this method. CSS control will not cause too much overhead. Self-feeling is a useful method!