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

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

Answer 1

要让文字溢出正常工作，您需要一套width - 将width设置为grid-row。

同时从display: flex中删除grid-cell - 请参阅下面的演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

您应该设置width

的.grid-cell

Answer 3

将此添加到.grid-cell：

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

像魅力一样。

省略号不起作用（flexbox）

3 个答案: