Pourquoi les ellipses CSS ne fonctionnent-elles pas dans la cellule de la table?

, Il est également important de mettre

table-layout:fixed;

Sur la table contenant, donc il fonctionne bien dans IE9 (si vous utilisez max-width) aussi bien.

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

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

Donc, la meilleure façon de réaliser ce que vous voulez serait d'envelopper votre texte dans un <div> et d'appliquer votre CSS au <div> (pas au <td>) comme ceci:

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

Essayez d'utiliser Max-width à la place .

Page de Démonstration

Pour les tables avec une largeur dynamique, j'ai trouvé le moyen ci-dessous pour produire des résultats satisfaisants. Chaque <th> qui souhaite avoir une capacité de texte rogné doit avoir un élément d'encapsulation interne qui enveloppe le contenu de l'autorisation <th> text-overflow au travail.

, Puis, le vrai truc est de mettre en max-width (sur la <th>) dans vw les unités.

Cela fera en sorte que la largeur de l'élément soit "liée" à la largeur de la fenêtre (Navigateur fenêtre) et se traduira par un écrêtage de contenu réactif. Réglez les vw unités à une valeur satisfaisante nécessaire.

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>

Juste offrir une alternative car j'ai eu ce problème et aucune des autres réponses ici n'a eu l'effet désiré que je voulais. Donc, à la place, j'ai utilisé une liste. Maintenant, sémantiquement, les informations que je produisais auraient pu être considérées à la fois comme des données tabulaires mais aussi des données listé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, en CSS, j'ai défini les éléments span sur display:block; et float:left; (je préfère cette combinaison de inline-block comme il va travailler dans les anciennes versions d'IE, pour effacer le flotteur effet voir: http://css-tricks.com/snippets/css/clear-fix/) et d'avoir aussi 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 travées et cela donnera à la liste une apparence de table.

Au lieu d'utiliser des points de suspension pour résoudre le problème du débordement de texte, j'ai trouvé qu'une entrée désactivée et stylée était meilleure et permettait toujours à l'utilisateur d'afficher et de sélectionner la chaîne entière si nécessaire.

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

Il ressemble à un champ de texte mais est en surbrillance donc plus convivial

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

function so_hack(){}

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

function so_hack(){}

Note: 100% ne fonctionne pas, mais 99% fait L'affaire dans FF. D'autres navigateurs modernes n'ont pas besoin de hacks div stupides.

td {
  border: 1px solid black;
    padding-left:5px;
    padding-right:5px;
}
td>div{
    max-width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

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 sur border-box value. Vous devez définir box-sizing: content-box.