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

Source: Internet
Author: User

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>

Method In Table:

<TABLE style = "table-layout: fixed; border-collapse: collapse; font-size: 12px;" border = "1" width = "200" bordercolor = #666666>
<TD nowrap style = "overflow: hidden; text-overflow: ellipsis; "> content </TD>

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!

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.