When the table cell content exceeds the limit, the ellipsis (...) is displayed.

When the table cell content exceeds the limit, the ellipsis (...) is displayed.
Description

In front-end development, you may often encounter situations where you need to limit the cell width and display ellipsis when the content exceeds the limit. The following describes how to achieve this effect.

Prerequisites

1. Control text not to wrap

white-space: nowrap;

2. When the length is exceeded, the ellipsis (...) appears.


overflow:hidden;text-overflow:ellipsis

3. Modify the table Layout Algorithm

table-layout:fixed;

The default value of table-layout isAutomaticThe column width is set by the cell content. Fixed indicates that the column width is set by the table width and column width.

That is to say, when you set the column width for the table, the actual situation does not work. When there are too many cells, the width will still be extended. If you want to make the table's column width display method determined by the column width defined for the cell, you must use the fixed value. Note:1. The width of the table must be set. 2. If only the table width is set, but the column width is not set, the column width is evenly allocated.

Code demo

As shown in the following code, the table contains four columns: name, age, gender, and address. These columns are 10%, 20%, 30%, and 40% respectively.

1 <! Doctype html> 2 
 
The display effect is as follows:

It is easy to see that the names, ages, gender, addresses, and other columns are 10%, 20%, 30%, and 40% respectively.
If you increase the content of the first name, the effect cannot be directly looked at (> success <)!

Cannot bear to look directly (> ignore <)!!

 
How can I display the excess content of a single row as a ellipsis? You only need to set the following attributes for cells:
White-space: nowrap;/* control single-line display */overflow: hidden;/* exceeds hidden */text-overflow: ellipsis;/* hidden characters are expressed by ellipsis */
Let's not talk much about it. Go to the code!
1 <! Doctype html> 2 
After modification, the effect is as follows: