Chen Chen - 1 month ago 6
CSS Question

ellipsis does not work (flexbox)

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.

Answer Source

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>