Shulou(Shulou.com)06/03 Report--

This article introduces you to the table after the use of text-overflow can not hide beyond the text of the solution, the content is very detailed, interested friends can refer to, hope to be helpful to you.

There is a text-related attribute text-overflow in css3 in w3cschool. When it is set to ellipsis, the text overflow content can be displayed as an ellipsis mark, while when it is set to clip, the text overflow part can be cut out, of course, if two properties are set, namely white-space:nowrap (force text to be displayed on one line) and overflow:hidden (overflow content is hidden), that is, both.

The code is as follows:

{

Text-overflow:ellipsis or clip

White-space:nowrap

Overflow:hidden

}

Because this attribute has been used many times before, and it has been used smoothly, recently I encountered the problem of too much content in td and line wrapping that affected the overall beauty when I was working on some table. So I wanted to keep the text unwrapped and let the excess text be displayed as ellipses, so I naturally used the above three attributes and also set the length and width for td. I still couldn't solve the problem after trying to rule out all kinds of possible influences, so I had to go to google, and finally found the reason, that is, to define an attribute table-layout:fixed in the style of table. To sum up, in order to solve the problem that the excess text cannot be hidden after using text-overflow in the table, we must use the following attributes completely.

The code is as follows:

Td {

Text-overflow:ellipsis or clip

White-space:nowrap

Overflow:hidden

Width:**px

}

Table {

Table-layout:fixed

}

And if you want to show hidden text when you move the mouse up, you can also set the

The code is as follows:

Td:hover

{

Text-overflow:inherit

Overflow:visible

}

On the table after the use of text-overflow can not hide the text of the solution to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.