Table content single/multi-line display (2) - When the table has padding, the multi-line ellipsis display does not take effect

background

When the table needs to have too much content, only single-line/multi-line content should be displayed, and the rest should be displayed in the form of ellipsis.

But I found a problem. After adding the padding attribute to the table, the previous single-line ellipsis display will not be affected, but the multi-line ellipsis display will have problems, as shown in the figure below: the ellipsis appears, but there is an extra line below.
insert image description here

Solution

method one

One method found on the Internet is to nest a label in the outer layer of the label that uses multi-line overflow, and then set the padding value on the outer label.

An article found on the Internet: After the element uses padding, the multi-line overflow set will not take effect , but this article does not give an example, only a general idea.

I also adopted a similar method to achieve it in the follow-up. You can refer to my other article: Table content single/multi-line display (3) - how to set when antd table has padding value

Method Two

Consider using aftera pseudo-element to cover up the excess. The code used is as follows:

Note :

The height of the after pseudo-class must be consistent with the padding-bottom of td to be completely covered.
This approach has a flaw, please turn to the end of the article.

One point needs to be explained here: this method can be perfectly implemented in the simple demo I wrote, but when I applied the after pseudo-class method to the antd component, I found that the cell with the pseudo-class added There are some confusions in the style, of course, it may also be caused by changes to antd's table style in my project (table row height, padding and various styles).

Teachers, you can try to see if you can directly use the following css style to meet the requirements. If you have any problems, you can refer to my practice, which is recorded in this article: Table content single/multi-line display (3) - antd table has padding value how to set

.multiLine {
    
    
	position: relative; /*这个是在原来的css上加上的，为了确定after出现的位置*/
    overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /*设置行数*/
	-webkit-box-orient: vertical;
    word-break: break-all; /*使连续的字母或数字能够在换行时拆分*/
}
.multiLine::after {
    
    
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;   
    width: 100%; 
    height: 16px;  /*这个是设置的padding-bottom的值*/
    background-color: white;
}

<table>
            <tr>
                <td width="20%" class="multiLine">So , I want  I want to show a paragraph from database into a table cell.</td>
                <td width="40%">为td设置width=“20%”，multiLine类名</td>
                <td width="40%">width的百分比不是整个table的</td>
            </tr>
            <tr>
                <td class="singleLine">So , I want  I want  I want to show a paragraph from database into a table cell.</td>
                <td width="40%">英文句子，singleLine类名，td不设width</td>
                <td width="40%" rowspan="2">中英文句子省略的情况下，不能为td设置宽度</td>
            </tr>
            <tr>
                <td class="multiLine">So , I want  I want  I want  I want to show a paragraph from database into a table cell.</td>
                <td width="40%">英文句子，multiLine类名，td不设width</td>
                <td width="40%">100</td>
            </tr>
</table>

Effect:
insert image description here

defect

During the test, it was found that this method has a shortcoming:
when multiple adjacent tds are set with css styles for displaying content in multiple lines, there will be problems with the layout of the table, which is due to the display: -webkit-box; property change It is caused by the overall layout style.

insert image description here