Ellipsis on text contained in a flex item sized by flex-grow

Question

I Have a single row, using flexbox, which contains cells.

I wish that the text of the first cell to be on a single line and truncated with an ellipsis. Everything as to remain responsive.

However using the classic css trick :

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Applies only if the parent element containing the text have a fixed width.

HTML

<div class="row">
    <div class="cell cell1">
        Some long-text
        long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-
    </div>
    <div class="cell cell2">cell-2</div>
    <div class="cell cell3">cell-3</div>
    <div class="cell cell4">cell-4</div>
</div>

CSS

.row {
  display: flex;
  flex-direction: row;

  .cell {
    flex-grow: 1;
    flex-basis: 0;
  }
}

How can I only define the size of my cells using flex-grow + flex-basis and also manage my single line truncated text ?

Answer 1

You can make this modification to your css: Add overflow: hidden to all cells to ensure that text overflow is hidden and add white-space: nowrap and text-overflow: ellipsis only to the .cell1 class to truncate the text in the first cell. Here's the code below:

     .row {
        display: flex;
        flex-direction: row;

        .cell {
          flex-grow: 1;
          flex-basis: 0;
          overflow: hidden;
        }
      }
      .cell1 {
        white-space: nowrap;
        text-overflow: ellipsis;
      }