Affichage CSS: la table-cellule ignore le débordement et la largeur

Violon: http://jsfiddle.net/wTtsV/

La cellule du tableau #t2 n'est pas correctement la taille:

HTML:

<div id="table">
    <div id="t1">a</div>
    <div id="t2">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
    <div id="t3">a</div>
</div>

CSS:

body{
    margin: 0;
}
#table{
    display: table;
    width: 100%;
}
#t1{
    display: table-cell;
    background-color: red;
}
#t2{
    display: table-cell;
    background-color: green;
}
#t3{
    display: table-cell;
    background-color: blue;
}

Résultat attendu:

Affichage CSS: la table-cellule ignore le débordement et la largeur

Comment cacher un texte dans #t2 quand c'est trop long?

source d'informationauteur user2769623

  1. 8

    Violon: http://jsfiddle.net/wTtsV/7/

    word-break:break-all;
  2. 34

    J'ai eu exactement le même problème, et j'ai eu une belle solution. Ajouter table-layout: fixed; à votre id de tableau:

    #table{
    display: table;
    width: 100%;
    table-layout: fixed;
}

    Amusez-vous! 😀

  3. 2

    Peut-être vous êtes à la recherche de:-

    overflow:hidden;

    masquer le texte à l'extérieur de la zone.

    ou peut-être vous pouvez essayer d'utiliser ceci:-

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