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.

Solution 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:

CSS 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-1 {
    width: 25%;
    }
.col-1 h1 {
  margin: 0;
  padding: 0;
}

.col-2 {
    width: 50%;
    }
.col-2 ul {
  margin: 0;
  padding: 0;
}

.col-2 li {
  float: left;
  list-style: none;
  margin-right: 10px;
}

.col-3 {
    width: 25%;
    display: flex;
    flex-direction: row;
}
.col-3 .foo {
  flex: 0 1 auto;
}
.col-3 .foo img {
  display: block;
  margin: 0;
  padding: 0;
}
    
.col-3 .bar {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 2 auto;
}
    
.col-3 .baz {
  background: #ccc;
  height: 50px;
  line-height: 50px;
  padding: 0 5px;
  flex: 1 1 auto;
}

JSFiddle Example

Solution 2

Please try out let the parent have "min-width: 0;". According to: Carlor on codepen.io (https://codepen.io/cjulian/pen/wrOyJz)

.wrapper {
  display: flex;
  width: 100%;
}

.fluid {
  flex: 1 1 100%;
  min-width: 0;
}

.fluid-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.static-content {
  width: 200px;
}

/* not required styles */
.wrapper {
  border: 1px solid black;
}

.fluid-content {
  background-color: pink;
}

.static-content {
  background-color: yellow;
}

<h1>text-overflow on a fluid width container</h1>
<div class="wrapper">
  <div class="fluid">
    <div class="fluid-content">
      This div does not have a fixed width. Its content will not wrap.
      If the content does not fit it will be truncated with ellipses.
    </div>
  </div>
  <div class="static">
    <div class="static-content">
      fixed width
    </div>
  </div>
</div>

Comments

[Josh Burgess]

Just realized you probably want a flex display. Give me a second to edit.

[Hughes]

I made a few modifications, but this got me to where I needed. Thanks!

[geertjanknapen]

You answered a question from 2015 that already had an accepted answer?

[Louis Tran]

@geertjanknapen Yes I am. Because I not understand that answer, I use max-width and it not work, I have clicked to Example links, and it example not work too. So I have found the answer using min-width, and it's work.