Pourquoi l'ellipse CSS ne fonctionne-t-elle pas dans une cellule de tableau ?

Question

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

Le résultat est le suivant : width = 139 et l'ellipse n'apparaît pas.

Qu'est-ce qui m'échappe ?

Answer 1

Apparemment, en ajoutant :

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

résout également le problème.

---

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

Answer 2

Il est également important de mettre

table-layout:fixed;

Onto the containing table, so it operates well in IE9 (if your utilize max-width) as well in IE9 (if your utilize max-width).

Answer 3

Comme indiqué précédemment, vous pouvez utiliser td { display: block; } mais cela va à l'encontre de l'objectif poursuivi par l'utilisation d'un tableau.

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

La meilleure façon d'obtenir ce que vous souhaitez est donc d'envelopper votre texte dans un fichier <div> et appliquez votre CSS à la <div> (pas au <td> ) comme ceci :

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

Answer 4

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 .

Answer 5

Page de démonstration

Pour les tableaux à largeur dynamique, j'ai trouvé la méthode ci-dessous qui donne des résultats satisfaisants. Chaque <th> dont on souhaite qu'il ait une capacité de texte tronqué doit avoir un élément d'habillage intérieur qui enveloppe le contenu de l'élément <th> permettre text-overflow pour travailler.

La véritable astuce consiste à définir max-width (sur le site <th> ) en vw unités .

La largeur de l'élément sera ainsi "liée" à la largeur de la fenêtre de visualisation (fenêtre du navigateur) et il en résultera un écrêtage réactif du contenu. Définir la largeur de l'élément vw à une valeur satisfaisante nécessaire.

CSS minimal :

th{ max-width:10vw; }

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

---

Démonstration (avec textes modifiables) :

document.designMode="on"

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>