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

Je propose simplement une alternative car j'ai eu ce problème et aucune des autres réponses n'a eu l'effet escompté. J'ai donc utilisé une liste. D'un point de vue sémantique, les informations que je produisais auraient pu être considérées à la fois comme des données tabulaires et comme des données énumérées.

En fin de compte, ce que j'ai fait, c'est.. :

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

En résumé ul es table , li es tr y span es td .

Ensuite, dans le CSS, j'ai défini l'élément span les éléments à être display:block; y float:left; (Je préfère cette combinaison à inline-block car il fonctionnera dans les anciennes versions d'IE, pour effacer l'effet de flottement : http://css-tricks.com/snippets/css/clear-fix/ ) et d'avoir également les ellipses :

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

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

Il suffit alors de définir le max-widths de vos travées et cela donnera à la liste l'apparence d'un tableau.

Answer 2

Au lieu d'utiliser des points de suspension pour résoudre le problème du texte débordant, j'ai trouvé qu'une entrée désactivée et stylisée était plus esthétique et permettait toujours à l'utilisateur d'afficher et de sélectionner la chaîne entière s'il en avait besoin.

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

Il ressemble à un champ de texte, mais il est possible de le surligner, ce qui le rend plus convivial.

Answer 3

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

Answer 4

J'ai essayé plusieurs des solutions ci-dessus, mais aucune ne m'a semblé souple ou satisfaisante.

Cette petite astuce avec max-width : 1px peut être appliquée directement à l'élément td

.truncated-cell {
   max-width: 1px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

Answer 5

Laissez vos tables en l'état. Il suffit d'envelopper le contenu à l'intérieur des TD avec un span auquel est appliqué le CSS de troncature.

/* 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>