Texte de dépassement des points de suspension dynamique de la largeur de l'élément

Je vais avoir quelques problèmes en essayant d'obtenir text-overflow: ellipsis de travailler sur un élément avec une dynamique de largeur. J'ai regardé dans d'autres solutions, mais toutes semblent utiliser une certaine forme de largeur statique, où, comme je suis l'espoir de réaliser entièrement une solution dynamique. Javascript EST une option, mais préfère garder pour CSS si possible. J'ai aussi la contrainte de toute solution en cours de IE8 compatible. Voici ce que j'ai jusqu'à présent.

Le code 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>

Le 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;
    }
}

Idéalement, j'aimerais que l'élément avec la classe de .bar de prendre le reste de la largeur de .col-3. Tout coup de pouce dans la bonne direction serait grandement apprécié. Voici un lien vers un JSFiddle. Merci!

OriginalL'auteur Hughes | 2015-08-10

  1. 26

    Juste ajouter max-width: 100% de l'élément afin de réaliser ce que vous êtes après. La raison pour laquelle vous besoin d'une sorte de largeur, c'est que l'élément continuera à augmenter jusqu'à ce que vous lui dites qu'il ne peut pas.

    Voici un JSFiddle Exemple.

    .bar {
    float: left;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* new css */
    max-width: 100%;
}

    Edit – Flexbox édition

    Donc, voici un flexbox d'affichage. Vous allez avoir besoin de cale pour IE8 à l'aide d'une bibliothèque comme ceci: https://github.com/sfioritto/real-world-flexbox/tree/master/demos/flexie

    Voici la solution pour les navigateurs qui ne suce pas:

    SCSS mise à Jour

    .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 Exemple

    Viens de réaliser que vous voudrez probablement une flex d'affichage. Donnez-moi une seconde pour modifier.
    Vous avez lu mon esprit, merci beaucoup!
    Mis à jour.
    J'ai fait quelques modifications, mais cela m'a fait à l'endroit où j'avais besoin. Merci!

    OriginalL'auteur Josh Burgess