How to add ellipses function in table

This time I will show you how to add the ellipsis function in the table table. What are the precautions for adding the ellipsis function in the table table? The following is a practical case, let's take a look.

1. Cause

After receiving a request, it was said that if there are too many words in the table, ellipses should be used. It is natural to think of text-overflow:ellipsis (, note: overflow: hidden; text- overflow:ellipsis; white-space:nowrap must be used together), but it does not work in the table. Baidu immediately said that in order to work, you need to set table-layout: fixed to the table element, and it worked.

2. The prerequisite for text-overflow:ellipsis to work

Be sure to define the width of the container (key point)

If overflow: hidden; is missing; the text will be stretched horizontally Easy outside

If the white-space:nowrap; text is missing, the height of the container will be pushed down; even if you define the height, the ellipsis will not appear and the excess text will be cut off

If text-overflow:ellipsis; is missing, the excess text will be cut off, which is equivalent to defining text-overflow:clip like this

3. The premise of the above key points

Be sure to define the width of the container. This is why table-layout: fixed works, but table-layout: auto (table element defaults to auto) does not work. The following paragraph comes from the CSS2.1 Chinese version specification:

'table-layout'
Value: auto | fixed | inherit
Initial: auto
Applies to: 'table' and 'inline-table' elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: Same as the specified value

The 'table-layout' property controls the algorithm used for table cell, row, and column layout. The meaning of the value is as follows:
fixed: Use fixed table layout algorithm
auto: Use any automatic table layout algorithm

(The difference between fixed and auto is that one is fixed and the other is automatic)

Following These two algorithms are described:

In the fixed table layout algorithm (fixed), the width of each column is determined by the following rules:

A column whose width attribute value is not 'auto' The width of the column where the element is located is set to the width value

Otherwise, the width of the column is determined by the cells in the first row whose width attribute value is not 'auto'. If the cell spans multiple columns, the width is divided over the columns

All remaining columns are divided equally between the remaining horizontal table space (minus borders or cell spacing) As mentioned in

3, all remaining columns equally divide the remaining horizontal table space. The actual situation is that the table divides the width of the remaining columns equally, and the fixed width of each column is the remaining width/number of remaining columns, text-overflow The prerequisite for :ellipsis to work is that the width of the container must be defined, so fixed works.

In the automatic table layout algorithm (fixed), the column width is determined by the following steps:

Calculate each Minimum content width (MCW) of cells: Formatted content can span any number of lines, but cannot overflow from the cell. If the cell's specified 'width' (W) is greater than MCW, W is the minimum cell width. The 'auto' value means that the MCW is the minimum cell width. Then, the "maximum" width of each cell is calculated: format the content, not considering line breaks other than explicit line breaks

For each column, start from only Determines a maximum and minimum column width among the cells spanning the column. The minimum column width is the minimum required column width whichever is the largest of the minimum cell widths (or column 'width', whichever is greater). The maximum column width is the maximum column width required for the largest of the maximum cell widths (or column 'width', whichever is greater)

For each cell that spans multiple columns, increase the The minimum width of the columns, making them at least as wide as the cells. The same goes for the maximum width. If possible, widen all spanning columns to approximately the same width

For each column group element whose 'width' is not 'auto', increase the minimum width of the columns it spans so that they are at least as wide as The 'width' of the column group is the same width

In fact, some things are very simple, but talking about it is confusing. . . As mentioned in
1, if the 'width' (W) specified by the cell is greater than MCW, W is the minimum cell width. The 'auto' value indicates that MCW is the minimum cell width.

**Case 1: When W > MCW, W is the minimum cell width, indicating that column width = W, column width can fit text, and no ellipses are needed.
Case 2: When W **
If you want to use ellipsis without using table-layout:fixed, that is, under the premise of table-layout:auto, you can do as follows (set another element in td, and add this element to Setting ellipsis)

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use the pseudo element first-letter to capitalize the first letter of text

Detailed explanation of the Counters attribute of css

Detailed explanation of function overloading in JavaScript

How front-end and back-end data should interact scientifically

The above is the detailed content of How to add ellipses function in table. For more information, please follow other related articles on the PHP Chinese website!