省略号不起作用（flexbox）

Question

我正在尝试为文本溢出添加省略号：

parent:

.grid-row {
  display: flex;
}

child:

.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;
}

而且，overflow 是 hidden，但没有任何省略号。

Answer 1

.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;
}

您应该设置 .grid-cell 的 width

Answer 2

要使 text overflow 正常工作，您需要一组 width - 将 width 设置为您的 grid-row。

同时从 grid-cell 中删除 display: 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>

Answer 3

将此添加到您的 .grid-cell：

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

很有魅力。

省略号不起作用（flexbox）

ellipsis does not work (flexbox)

html

css

ellipsis

flexbox