Table overflow Layout

Table overflow Layout

What is content overflow? In fact, when there is a lot of text, if the content area is only so long, then the extra part is replaced by a dot.

This case is in table. We know that when we input too much text in the table, the table will be messy, for example, a line is too long or automatic line feed. However, sometimes we want to display it in a row with a fixed width. If there are more parts, we should use a dot instead, so that we won't mess up the table. So what should we do?

Generally, the following attributes are used.

/* Overflow partial style */. txt-ell {white-space: nowrap; // force overflow: hidden to be displayed on a row; // The overflow content is cut to hide text-overflow: ellipsis; // when the inline overflow block container is used, replace the overflow part... Word-break: keep-all; // you can use color: red to wrap a new line in a word. // here, I mark padding: 0 7px. // to keep a distance from the edge, so set the following}

. Table-fix {table-layout: fixed ;}

First, the second style is specifically added to the table label. To implement content overflow, the table must have a fixed width and height, and the tr and td in the table must also have a fixed width and height. Before using content overflow, add the table-fix class to the table. Then, check whether your tr and td have given width. If not, you 'd better give it a fixed value. The percentage value is also the same. The percentage value I mainly give, the outer table is given a fixed width, and the tr and td inside are the width of the percentage, so that the content overflow style can be used. At last, if there are a lot of internal content in the lattice, you can give it a TXT-ell class.