css-Set single-line text overflow ellipsis, use the overflow:hidden property to solve the problems that arise.

1 An ellipsis appears after setting a single-line text overflow

Necessary: ​​fixed width needs to be set, line breaks are not allowed

width: 200px;
white-space: nowrap;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

2 An ellipsis appears after setting N lines of text overflow

width: 200px;
white-space: nowrap;  
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: N; /* 需要几行省略设置几行*/
-webkit-box-orient: vertical;

The above is to set the text overflow ellipsis display. The following is the problem encountered

question:

During the test, it was found that when the browser resolution is increased, there will be a bug that the text below is blocked. This problem occurs in more than 125%.

The impact of resolution is really difficult to deal with, because many times it is impossible to locate specific problems.

I first adjusted the height of the parent element of the outer layer, but found that it did not solve the problem

I also lowered the line-height: attribute value and found that 125% can be displayed, but the font cannot be vertically centered. And it still has this problem when it is adjusted to 200%.

So I set padding-bottom to 5px again. I found that it still doesn't work, but I found that the element did not change when the padding-bottom was increased. So I set the element to a fixed height because it's a single line of text

Using heightthe property to set the height of an element, rather than directly line-height, prevents impact on elements below it.

.content {
              height: 40px;
              line-height: 40px;
              overflow: hidden;
              display: flex;
              font-size: 14px;
              p {
                height: 40px; // 此处为后来加的  加上之后就可以解决
                width: 150px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-align: center;
              }
            }

When I adjust the browser zoom to 150%, it can also display the full