对于文本溢出：要使用省略号,必须定义宽度.你有flex-basis：auto,这还不够.
此外,文本溢出：省略号仅适用于块级元素.
弹性项目被视为blockified,省略号将起作用.但是,您还将display：flex应用于flex项,这会破坏display属性的块级规则.
尝试这些调整：
ul {
display: flex;
height: 40px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}
ul li {
/* display: flex;
/* align-items: center;
height: 100%;
padding: 0 4px;
border-bottom: 1px solid #eee;
}
ul li:first-child {
width: 55px;
flex-shrink: 0;
}
ul li:first-child input {
width: 100%;
}
ul li:last-child {
width: 48px;
flex-shrink: 0;
}
ul li:nth-child(2) {
flex: 0 1 100px; /* adjusted; 100px for demo only */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0px;
}
ul li:nth-child(3) {
width: 75px;
flex-shrink: 0;
}
- A very long text description goes here
- $99.90
- Del
要使文本垂直居中,可以像以前一样在非省略号元素上使用flex布局.要使省略号文本垂直居中,请点击try another method.
参考文献：