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

【问题标题】：ellipsis does not work (flexbox) [duplicate]省略号不起作用（flexbox）[重复]
【发布时间】：2018-02-01 07:36:43
【问题描述】：

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

父母：

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

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

【问题讨论】：

许多 flexbox / 省略号帖子。 these 之一可能会有所帮助（并且是重复的）..
没有HTML，问题无法重现。

标签： html css flexbox ellipsis

【解决方案1】：

文本溢出需要设置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>

【讨论】：

在他需要显示单元格的问题中：flex，要求将其删除会使答案无关紧要。

【解决方案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;
}

你应该设置width 的.grid-cell

【讨论】：

试过了。不工作
@Chen 尝试添加宽度。

【解决方案3】：

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

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

像魅力一样工作。

【讨论】：

不，它不起作用。