Display ellipsis effect when table cell content exceeds (implementation code)

illustrate

In front-end development, you often encounter situations where you need to limit the cell width and display an ellipsis for the part where the content exceeds the limit. Here is a brief introduction on how to achieve this effect.

Preparatory knowledge

1. Control text without line break

white-space: nowrap;

2. When the length is exceeded, an ellipsis appears

overflow:hidden;

text-overflow:ellipsis

3. Modify the table layout algorithm

table-layout:fixed; The default value of table-layout is automatic, which means that the column width is set by the cell content. Fixed means that the column width is set by the table width and the column width.

That is to say, when you set the column width for the table, it actually does not work. When there is too much content in the cell, the width will still be expanded. If you want the table column width to be determined by the column width you define for the cell, you must use the fixed value.

Note: 1. The table width must be set. 2. If you only set the table width without setting the column width, the column widths will be evenly distributed.

Code Demonstration

As shown in the following code, the table has four columns: name, age, gender, and address. The lengths of these columns are 10%, 20%, 30%, and 40% respectively.

The display effect is as follows:

It is easy to see that the lengths of the name, age, gender, and address columns are 10%, 20%, 30%, and 40% respectively.

If the content of the first name is increased, the effect is simply unbearable to look at (＞﹏＜)!

I can’t bear to look at it (＞﹏＜)! !

How to display the part exceeding a single line as ellipsis? You just need to set the cell properties as follows:

After modification, the effect is as follows:

The above article about displaying ellipsis effect when table cell content exceeds the limit (implementation code) is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.