省略号不起作用（flexbox）[重复]

Question

我试图把省略号文本溢出：

家长：

.grid-row {
  display: flex;
}

儿童：

.grid-cell {
  display: flex;
  flex-grow: 3;
  flex-basis: 0;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-cell:first-child {
  flex-grow: 1;
  justify-content: center;
}

而且，溢出是隐藏的，但没有任何省略号。

Answer 1

将此添加到您的应用程序中。网格单元：

max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

像魅力一样工作。

Answer 2

.grid-cell {
  display: flex;
  flex-grow: 3;
  flex-basis: 0;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap:normal;
  width: ###px;
}

您应该设置的宽度。网格单元

Answer 3

要使文本溢出正常工作，您需要设置宽度-将宽度设置到网格行。

同时从网格单元中移除显示：flex-参见下面的演示：

.grid-row {
  display: flex;
  width: 250px;
}
.grid-cell {
  /*display: flex;*/
  flex-grow: 3;
  flex-basis: 0;
  /*align-items: center;*/
  padding: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grid-cell:first-child {
  flex-grow: 1;
  justify-content: center;
}

<div class="grid-row">
  <div class="grid-cell">insert text here</div>
  <div class="grid-cell">some text</div>
  <div class="grid-cell">some more text here</div>
</div>