web-dev-qa-db-fra.com

Pourquoi les CSS Ellipsis ne fonctionnent-ils pas dans la cellule de tableau?

Prenons l'exemple suivant: ( démonstration en direct ici )

HTML:

<table>
  <tbody>
    <tr><td>Hello Stack Overflow</td></tr>
  </tbody>
</table>

CSS:

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: nowrap;
}

JS:

$(function() {
  console.log("width = " + $("td").width());
});

La sortie est: width = 139, et l'ellipsis n'apparaît pas.

Qu'est-ce que j'oublie ici?

htmlcssellipsiscss3
129
Misha Moroshko

Apparemment, en ajoutant:

td {
  display: block; /* or inline-block */
}

résout le problème aussi.

Une autre solution possible consiste à définir table-layout: fixed; pour la table et à définir width. Par exemple: http://jsfiddle.net/fd3Zx/5/

95
Misha Moroshko

Il est également important de mettre

table-layout:fixed;

Sur la table conteneur, cela fonctionne donc bien dans IE9 (si vous utilisez max-width).

73
streetlight

Comme indiqué précédemment, vous pouvez utiliser td { display: block; }, mais cela irait à l'encontre de l'utilisation d'une table.

Vous pouvez utiliser table { table-layout: fixed; } mais peut-être souhaitez-vous qu'il se comporte différemment pour certaines colonnes.

Donc, le meilleur moyen d’atteindre ce que vous voulez est d’envelopper votre texte dans un <div> et d’appliquer votre CSS au <div> (et non au <td>) comme ceci:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: nowrap;
}
67
marcosbdm

Essayez d'utiliser max-width au lieu de width, le tableau calculera toujours la largeur automatiquement.

Fonctionne même en ie11 (avec le mode de compatibilité ie8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: Ellipsis;
  white-space: nowrap;
}
<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

33
Ashe

Page de démonstration

Pour les tableaux à largeur dynamique, j'ai trouvé le moyen ci-dessous de produire des résultats satisfaisants. Chaque <th> qui souhaite avoir une capacité de texte ajusté doit avoir un élément d'emballage interne qui enveloppe le contenu de <th> allow text-overflow pour fonctionner. 

Ensuite, le vrai truc consiste à définir max-width (sur le <th>) dans vw units. 

Cela aura pour effet de "lier" la largeur de l'élément à la largeur de la fenêtre d'affichage (fenêtre du navigateur) et entraînera un écrêtage du contenu réactif. Définissez les unités vw sur une valeur satisfaisante requise. 

CSS minimal:

th{ max-width:10vw; }

th > .wrap{ 
   text-overflow:Ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Voici une démo exécutable:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: Ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

15
vsync

Le fait d’offrir une solution de rechange, car j’avais ce problème et aucune des autres réponses ici n’avait l’effet souhaité. Alors à la place, j'ai utilisé une liste. Or, sémantiquement, les informations que je produisais auraient pu être considérées à la fois comme des données tabulaires et des données répertoriées.

Donc à la fin ce que j'ai fait était:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Donc, fondamentalement, ul est table, li est tr et span est td.

Ensuite, dans CSS, je règle les éléments span sur display:block; et float:left; (je préfère cette combinaison à inline-block, car cela fonctionnera dans les anciennes versions d'IE, pour effacer l'effet float, voir: http://css-tricks.com/ snippets/css/clear-fix/ ) et d’avoir les ellipses:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: Ellipsis;
    white-space: nowrap;
}

Ensuite, tout ce que vous faites est de définir le max-widths de vos étendues et cela donnera à la liste une apparence de table.

3
diggersworld

Au lieu d’utiliser Ellipsis pour résoudre le problème de débordement de texte, j’ai trouvé qu’une entrée désactivée et stylée était plus esthétique et permettait toujours à l’utilisateur de visualiser et de sélectionner la chaîne entière s’il le fallait.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Cela ressemble à un champ de texte mais est surligné, donc plus convivial

1
craigsnyders

Vérifiez la propriété box-sizing css de vos éléments td. J'ai eu un problème avec le modèle CSS qui le définit à border-box valeur. Vous devez définir box-sizing: content-box.

1
David Slavík

Si vous ne voulez pas définir max-width sur td (comme dans cette réponse ), vous pouvez définir max-width sur div:

function so_hack(){}

function so_hack(){}http://jsfiddle.net/fd3Zx/754/function so_hack(){}

function so_hack(){}

Remarque: 100% ne fonctionne pas, mais 99% fait l'affaire en FF. Les autres navigateurs modernes n'ont pas besoin de hacks div stupides.

 td {
 bordure: 1px noir uni; 
 padding-left: 5px; 
 padding-right: 5px; 
} 
 td> div {
 largeur maximale: 99%; 
 débordement caché;
 débordement de texte: Ellipsis; 
 white-space: nowrap; 

}
0
Timo Kähkönen

Laissez vos tables comme elles sont. Enroulez simplement le contenu à l'intérieur du TD avec une étendue à laquelle la CSS de troncature est appliquée.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>
0
Jeff Sieffert