How to make ellipsis work on flex item with dynamic width (flex:1)?

Question

I'm trying to implement white-space: nowrap; and text-overflow: ellipsis; on a flex:1; div without setting the max-width. I want it to adjust to the width flex:1 gives.

Here is a fiddle that explains what I want and what actually happens: https://jsfiddle.net/dani3l/6y04bvu1/13/

I'd like to keep the solution css only if possible.

Thanks in advance!

Related - http://stackoverflow.com/questions/31329835/css-fit-content-div-to-remaining-space/33228704#33228704 — Paulie_D, Feb 09 '16 at 10:19

score 0 · Accepted Answer · answered Feb 09 '16 at 12:45

0

to apply text-overflow: ellipsis, you have to give width or max-width otherwise it don't have any idea where it needs to stop.

answered Feb 09 '16 at 12:45

Jay Patel

5,783
1
17
20

So I guess I must use js to calculate the element width and set max-width on-the-fly. – sUP Feb 09 '16 at 13:52
yes. you can calculate that with js if your width is depend on other factor. – Jay Patel Feb 10 '16 at 05:43
1

Try `width: 0; flex: 1`. I don't know if it works in every browser. – Håken Lid Jul 22 '19 at 20:04

score 0 · Answer 2 · answered Jul 28 '16 at 20:53

You can try this in your flex:1 class:

.flex-1, .flex-1 > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Here is a snippet to show this.

.flex-container {
  display: flex;
  align-items: center;
  height: 50px;
  width: 120px;
  padding: 0 10px;
  background-color: black;
}

.flex-1 {
  flex: 1;
  color: white;
}

.flex-1, .flex-1 > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-container">
  <div class="flex-1">
    This is very long text.
  </div>
</div>


<br>
<br>

<div class="flex-container">
  <div class="flex-1">
    <div>
      Child divs work too
    </div>
    <br />
    <span>
      Child spans work too
    </span>
  </div>
</div>

I found Larry Gordon's Codepen that helped me with this.

How to make ellipsis work on flex item with dynamic width (flex:1)?

2 Answers2