Text overflow solves the problem of text-overflow: ellipsis; does not take effect

Text overflow solves the problem of text-overflow: ellipsis; does not take effect

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

But if the layout format of this element is: flexit will fail

display: flex;
align-items: center;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

Of course, other methods can also be used to achieve the hidden solution of text overflow