【问题标题】: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;
}

而且,overflowhidden,但没有任何省略号。

【问题讨论】:

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

标签: html css flexbox ellipsis


【解决方案1】:

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

像魅力一样工作。

【讨论】:

  • 不,它不起作用。
猜你喜欢
  • 2020-07-29
  • 1970-01-01
  • 2017-10-03
  • 1970-01-01
  • 2018-04-01
  • 1970-01-01
  • 2014-10-31
  • 2018-01-30
相关资源
最近更新 更多