flex 在html中显示不出来,html – 文本省略号不显示在flexbox项目上

对于文本溢出：要使用省略号,必须定义宽度.你有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.

参考文献：