How to increase the ellipsis function in table tables

This time to bring you the table table how to increase the ellipsis function, table table to add the ellipsis function of attention to what, the following is the actual case, together to see.

1. Causes

Received the demand, said if the table in the word too much to use the ellipsis, it is natural to think of Text-overflow:ellipsis (, note: Overflow:hidden; text-overflow:ellipsis; White-space: NoWrap must be used together), but in the table does not work, immediately Baidu, said to want to function need to set the table element table-layout:fixed, really worked.

2. The premise of text-overflow:ellipsis function

Be sure to define a width for the container (emphasis)

If the Overflow:hidden is missing, the text will be laterally stretched to the outside of the easy

If there is less white-space:nowrap, the text will hold the height of the container down, even if you define the height, the ellipsis will not appear, the extra text will be cut off

If the text-overflow:ellipsis is less; The extra text will be cut off, which is the equivalent of defining text-overflow:clip

3. The premise of the above emphasis

Be sure to define a width for the container, which is why table-layout:fixed works, and Table-layout:auto (table element Default auto) does not work, the following paragraph is from the css2.1 Chinese version of the 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 specified value

The ' Table-layout ' property controls the algorithm used for table cells, row and column layouts. The value means the following:
Fixed: Using a stationary table layout algorithm
Auto: Using any automatic table layout algorithm

(Fixed and auto differences are a fix, an automatic)

Both of these algorithms are described below:

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

The column width of a column element where the Width property value is not ' auto ' is set to that width value

Otherwise, the width of the column is determined by the cell with the Width property value not ' auto ' in the first row. If the cells span multiple columns, divide the widths into these columns (the width is divided over the columns)

All remaining columns evenly divide the remaining horizontal table space (minus the border or cell spacing)

3 said, all remaining columns evenly divided the remaining horizontal table space, the actual fact is that the table will be the width of the remaining columns evenly, fixed the width of each column is the remaining width/remaining number of columns, the premise of text-overflow:ellipsis function is to be sure to define the container width, So the fixed is working.

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

Calculates the minimum content width (MCW) for each cell: formatted content can span as many rows as possible, but cannot overflow from a cell. If the cell specifies a ' width ' (W) greater than mcw,w is the minimum cell width. The ' auto ' value indicates that MCW is the smallest cell width, and then calculates the maximum width of each cell: formatting content, regardless of line breaks except explicit line breaks

For each column, determine a maximum and minimum column width from a cell that spans only that column. The minimum column width is the smallest column size (or column ' width ') that is required for the largest of the smallest cell widths. The maximum width is the maximum width of the largest cell (or column ' width ' to see which is larger).

For each cell that spans multiple columns, increase the minimum width of the columns it spans, making them at least as wide as the cells. This is also handled for the maximum width. If possible, widen the width of all the columns across

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

In fact, some things are very simple, but that is raozui ...
In 1, if the cell specifies a ' width ' (W) greater than mcw,w is the minimum cell width. The ' auto ' value indicates that the MCW is the smallest cell width.

* * Situation One: When W > MCW, W is the smallest cell width, indicating the column width = W, the column width is loaded with the text, not the ellipsis.
Case two: When W < MCW, MCW is the smallest cell width, indicating the column width = MCW, but this MCW is the text to fill the bottom of the calculation, since it is full, with the ellipsis to do ...
**
To use the table-layout:fixed without using the case, that is, Table-layout:auto premise with ellipsis, you can do as follows (in the TD set another element, the element 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>, .....

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

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

The counters property of CSS is detailed

A detailed description of the function overloading of JavaScript

How the front-end data should be scientifically interactive