Text overflow ellipsis on dynamic width element

Question

I'm having some issues trying to get text-overflow: ellipsis to work on an element with dynamic width. I've looked into other solutions but all of them seem to use some form of static width, whereas I'm hoping to achieve an entirely dynamic solution. Javascript IS an option but would prefer to keep it to CSS if possible. I also have the constraint of any solution being IE8 compatible. Below is what I have so far.

The HTML:

<div class="container">     <div class="col-1 cell">         <h1>Title</h1>     </div>     <div class="col-2 cell">         <nav>             <ul>                 <li><a href="#">Main #1</a></li>                 <li><a href="#">Main #2</a></li>                 <li><a href="#">Main #3</a></li>                 <li><a href="#">Main #4</a></li>                 <li><a href="#">Main #5</a></li>             </ul>         </nav>     </div>     <div class="col-3 cell">         <div class="foo">             <img src="http://placehold.it/50x50" alt="">         </div>         <div class="bar">             Some overly long title that should be ellipsis         </div>         <div class="baz">             v         </div>     </div> </div> 

The SCSS:

.container {     border: 1px solid #ccc;     display: table;     padding: 30px 15px;     table-layout: fixed;     width: 100%; }  .cell {     display: table-cell;     vertical-align: middle; }  .col-1 {     width: 25%;          h1 {         margin: 0;         padding: 0;     } }  .col-2 {     width: 50%;          ul {         margin: 0;         padding: 0;     }          li {         float: left;         list-style: none;         margin-right: 10px;     } }  .col-3 {     width: 25%;          .foo {         float: left;                  img {             display: block;             margin: 0;             padding: 0;         }     }          .bar {         float: left;         height: 50px;         line-height: 50px;         overflow: hidden;         text-overflow: ellipsis;         white-space: nowrap;     }          .baz {         background: #ccc;         float: left;         height: 50px;         line-height: 50px;         padding: 0 5px;     } } 

Ideally, I would like the element with the class of .bar to take up the remaining width of .col-3. Any nudge in the right direction would be greatly appreciated. Here a link to a JSFiddle as well.

Answer 1

Just add max-width: 100% to the element in order to achieve what you're after. The reason that you need some kind of width set is that the element will continue to expand until you tell it that it can't.

Here's a JSFiddle Example.

.bar {     float: left;     height: 50px;     line-height: 50px;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;      /* new css */     max-width: 100%; } 

Edit – Flexbox edition

So, here's a flexbox display. You're going to need to shim for IE8 using a library like this: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

Here's the fix for browsers that don't suck:

SCSS Update

.container {     border: 1px solid #ccc;     display: flex;     flex-direction: row;     padding: 30px 15px;     width: 100%; } .cell {     flex: 1 1 33%;     vertical-align: middle; } .col-3 {     width: 25%;     display: flex;     flex-direction: row;      .foo {         flex: 0 1 auto;          img {             display: block;             margin: 0;             padding: 0;         }     }      .bar {         height: 50px;         line-height: 50px;         overflow: hidden;         text-overflow: ellipsis;         white-space: nowrap;         flex: 1 2 auto;     }      .baz {         background: #ccc;         height: 50px;         line-height: 50px;         padding: 0 5px;         flex: 1 1 auto;     } } 

JSFiddle Example