CSS text-overflow dans une cellule de tableau?

Question

Je veux utiliser les CSS text-overflow dans une cellule de tableau, de telle sorte que si le texte est trop long pour tenir sur une seule ligne, il clip avec des points de suspension à la place de l'habillage sur plusieurs lignes. Est-ce possible?

J'ai essayé ceci:

td {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Mais l' white-space: nowrap semble rendre le texte (et de ses cellules) d'élargir en permanence à qui de droit, pousser la largeur totale de la table au-delà de la largeur de son conteneur. Toutefois, sans elle, le texte continue à s'étendre sur plusieurs lignes quand il touche le bord de la cellule.

Answer 1

Définir le max-width CSS bien sur chaque td classe pour le dépassement de capacité de travail, pas de div est nécessaire:

td
{
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Pour IE, vous devez avoir ceci dans votre code HTML, pour fixer un EXEMPLE spécifique d'un problème de rendu (jusqu'à IE9)

<!--[if IE]>
<style>
    table
    {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Answer 2

Pourquoi est-ce possible?

Il semble que cette section sur w3.org suggère que text-overflow ne s'applique qu'aux éléments de bloc:

11.1.  Overflow Ellipsis: the ‘text-overflow' property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

Le MDN a dit la même chose.

Cette jsfiddle a votre code (avec un peu de debug modifications), qui fonctionne très bien si elle est appliquée à un div au lieu de td. Il a également la seule solution que je pouvais penser rapidement d', en enveloppant le contenu de l' td dans un contenant div bloc. Cependant, cela ressemble à "laid" balisage pour moi, donc je suis en espérant que quelqu'un d'autre a une meilleure solution. Le code pour tester cela ressemble à ceci:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Answer 3

Il semble que si vous spécifiez une table-layout:fixe sur l'élément de la table, puis de styles pour les td doivent prendre effet. Ce sera également affecter la façon dont les cellules sont de taille moyenne, bien.

Sitepoint traite de la table-présentation des méthodes un peu ici: http://reference.sitepoint.com/css/tableformatting