Question

我在chrome和firefox上测试了text-overflow: ellipsis，两者都缩短了文本，但最后却没有显示'...'。这有什么问题？

我尝试使用我在此处找到的其他解决方案，例如min-width，max-width，flex: 0 1 auto等。但它们似乎都没有效果。省略号没有出现。

这是我的代码：

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 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
}
ul li:nth-child(3) {
  width: 75px;
  flex-shrink: 0;
}

这是演示问题的小提琴：https://jsfiddle.net/dpbejpou/1/

注意：我已经尝试过使用其他解决方案，就像我说的那样，例如min-width，max-width（你已经可以在我的代码中看到）找到on this link，但代码stil不起作用

Answer 1

要使text-overflow: ellipsis起作用，您必须定义宽度。你有flex-basis: auto，这还不够。

此外，text-overflow: ellipsis仅适用于块级元素。

弹性项目被视为blockified，省略号将起作用。但是，您还要将display: flex应用于弹性项目，这会破坏display属性的块级规则。

尝试以下调整：

ul {
  display: flex;
  height: 40px;
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
ul li {
  /* display: flex;           <-- remove */
  /* align-items: center;     <-- will no longer work */
  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;
}

<ul>
  <li><input type="number" value="1"></li>
  <li>A very long text description goes here</li>
  <li>$99.90</li>
  <li>Del</li>
</ul>

Revised Fiddle

要使文本垂直居中，可以在非省略号元素上使用flex布局，就像之前一样。要将省略号文本try another method垂直居中。

参考文献：

Answer 2

试试这个Fiddle

添加到标记的范围：

<ul>
  <li><input type="number" value="1"></li>
  <li><span>A very long text description goes here</span></li>
  <li>$99.90</li>
  <li>Del</li>
</ul>

只是这个css：

ul li:nth-child(2) span {
    max-width: 135px; //change it to any max value you like
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 3

您只需要删除li的display flex属性。请查看演示。

ul li {
  align-items: center;
  height: 100%;
  padding: 0 4px;
  border-bottom: 1px solid #eee;
}

Demo

文本省略号不显示在flexbox项目上

3 个答案: