ellipsis does not work (flexbox)

Question

I'm trying to put ellipsis for text overflow:

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

And, well the overflow is hidden, but without any ellipsis.

Many flexbox / ellipsis posts. One of [**these**](https://stackoverflow.com/search?q=user%3A3597276+%5Bflexbox%5D+ellipsis) may help (and be a duplicate).. — Michael Benjamin, Aug 23 '17 at 15:59

score 2 · Accepted Answer · answered Aug 23 '17 at 15:58

For text overflow to work you need a set width - set a width to your grid-row.

Also remove the display: flex from the grid-cell - see demo below:

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

In the question he needed the cell to be display: flex, asking to remove it makes the answer irrelevant. — Cesar, Jul 28 '19 at 09:07

kyun · Answer 2 · 2017-08-23T15:57:47.520

0

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

You should set the width of .grid-cell

edited Aug 23 '17 at 15:57

answered Aug 23 '17 at 15:56

kyun

9,710
9
31
66

tried. does not work – Chen Aug 23 '17 at 15:57
@Chen Try to add width. – kyun Aug 23 '17 at 15:58

score 0 · Answer 3 · answered Aug 23 '17 at 16:04

0

Add this to your .grid-cell:

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

Works like a charm.

answered Aug 23 '17 at 16:04

Thomas Bang Thomas Gaming

141
1
1
9

1

Nope, it doesn't work. – Paul Razvan Berg Nov 21 '19 at 00:18

ellipsis does not work (flexbox)

3 Answers3