text-overflow: ellipsis and flex

Question

I have a container element with display: flex property set. A children have fixed width (flex: 0 0 auto), another one no (flex: 1). The flexible children has some other children: I want this container (inner) to clip its children according to the parent width.

I managed to do this, but also I'd like to get the ellipsis overflow in case the content is clipped (the number of children is not fixed).

This is my code so far:

.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}

.inner {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
}

.child {
  display: inline-block;
  white-space: nowrap;
  flex: 1;
  border: 1px solid blue;
}

.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

Live here: http://jsbin.com/niheyiwiya/edit?html,css,output

How can I get the following desired result? (hacks welcome - css only please!)

The ellipsis css attribute will not work for this since you are attempting to use it on elements, not text. — Neil, Sep 13 '16 at 14:57
One thing you can do is give the ```.inner``` class property of ```flex-wrap: wrap``` — Harshal Carpenter, Sep 13 '16 at 15:06
`display:flex` is not a block container; it is, unsurprisingly, a flex container. — Alohci, Sep 13 '16 at 15:17

score 16 · Accepted Answer · edited May 23 '17 at 12:15

There are a few problems with your layout:

text-overflow: ellipsis only works with display: block and display: inline-block containers. It's failing because you have .inner set to display: flex.
text-overflow: ellipsis must include white-space: nowrap in the same declaration. It's missing in your .inner rule.
ellipsis works on text, not block-level elements

Try this:

* {
  margin: 15px 1px
}
.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}
.inner {
  /* display: flex */          /* removed */
  min-width: 0;
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;         /* new */
}
.child {
  display: inline;             /* adjusted */
  white-space: nowrap;
  flex: 1;
}
.btn {
  border: 1px solid green;
  flex: 0 0 auto;
}

<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

More about text-overflow: ellipsis here: Applying an ellipsis to multiline text

Nenad Vracar · Answer 2 · 2016-09-13T15:27:00.197

Here is JS approach where you could find which child div have position that overflows with position of button, and hide all divs after that div and append ... after that div.

var child = $('.child');
var btn = $('.btn');
var oW = $('.outer').innerWidth();
var w = btn.outerWidth();
var c = oW - w;
var last;

child.each(function() {
  var l = $(this).position().left + $(this).outerWidth();
  if (l > c) {
    if (last == undefined) last = $(this).index() - 1;
  }
})

$('.child:gt(' + last + ')').css('display', 'none');
$('.child:eq(' + last + ')').after(' ...')

* {
  margin: 15px 1px
}
.outer {
  border: 1px solid red;
  display: flex;
  width: 400px;
}
.inner {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}
.child {
  border: 1px solid blue;
  display: inline-block;
}
.btn {
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
    <div class="child">child 5</div>
    <div class="child">child 6</div>
    <div class="child">child 7</div>
  </div>
  <div class="btn">My big big big button!</div>
</div>

Juri Sinitson · Answer 3 · 2019-11-28T08:45:03.320

A great example with min-width: 0; which just works: https://css-tricks.com/flexbox-truncated-text/

BUT:

If your text to trancate is inside the a-tag, than you have to wrap that a-tag, in e.g. h2 or p. Otherwise the text will not be truncated because of the a-tag!

So here is the working example with the a-tag basing on example above:

.flex-parent {
 display: flex;
 align-items: center;
}

.long-and-truncated-with-child-corrected {
 flex: 1;
 min-width: 0;
  /* or some value */;
}

.long-and-truncated-with-child-corrected h2 {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.short-and-fixed {
 white-space: nowrap;
}

.short-and-fixed > div {
 width: 30px;
 height: 30px;
 border-radius: 10px;
 background: lightgreen;
 display: inline-block;
}

<div class="flex-parent">

      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://duckduckgo.com">333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</a>
        </h2>
    
      </div>
      <div class="long-and-truncated-with-child-corrected">
        <h2>
          <a href="https://vgn.de">
            44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444
          </a>
        </h2>
      </div>
      <div class="short-and-fixed">
        <div></div>
        <div></div>
        <div></div>
      </div>

</div>

Juri Sinitson · Answer 4 · 2019-11-29T08:43:53.890

1

In addition to the previous answer:

if you nest the flex-elements, than you have to add

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

to the parent container otherwise the hiding of the overflow may not work any more.

In some cases you need width: 0; in addition/instead of to min-width: 0;.

edited Nov 29 '19 at 08:43

answered Nov 28 '19 at 13:02

Juri Sinitson

1,445
1
14
18

text-overflow: ellipsis and flex

4 Answers4