Text overflow: ellipsis and flexibility

Question

I have a container element with a set of display: flex properties. Children have a fixed width ( flex: 0 0 auto ), the other does not ( flex: 1 ). Flexible children have other children: I want this container ( inner ) to dock its children according to the width of the parent.

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

This is my code:

 .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 next desired result? (hello hello - css just please!)

Answer 1

There are several problems in your layout:

• text-overflow: ellipsis only works with display: block and display: inline-block containers. This is not because you have .inner set to display: flex .

• text-overflow: ellipsis should include white-space: nowrap in the same declaration. It is missing from your .inner rule.

• Ellipsis works with text, not block-level elements.

Try the following:

 * { 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> 

Read more about text-overflow: ellipsis here: Applying ellipsis to multiline text

Answer 2

Here is a JS approach where you can find that the child div has a position that overflows with the button position, and hide all divs after that div and add ... 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>