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

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

HTML:

Hello Stack Overflow

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 les points de suspension n’apparaissent pas.

Qu’est-ce que j’oublie ici?

Apparemment, en ajoutant:

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

résout également le problème.


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

Il est également important de mettre

 table-layout:fixed; 

Sur la table contenant, elle fonctionne également bien dans IE9 (si vous utilisez max-width).

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

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

Donc, le meilleur moyen d’obtenir ce que vous voulez serait d’emballer votre texte dans un

et d’appliquer votre CSS au

(et non au

) comme ceci:

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

Essayez plutôt d’ utiliser max-width .

Page de démonstration

Pour les tableaux avec largeur dynamic, j’ai trouvé la manière ci-dessous de produire des résultats satisfaisants. Chaque

souhaitant avoir une capacité de texte ajusté doit avoir un élément d’enveloppement interne qui enveloppe le contenu de

autoriser le text-overflow de text-overflow .

Ensuite, le vrai truc consiste à définir max-width (sur le

) dans les unités vw .

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.

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; } 
 
Some long title
Short
medium one
endlessly super long title which no developer likes to see
- - - very long text here

Juste offrir une alternative car j’avais ce problème et aucune des autres réponses ici n’avait l’effet désiré je voulais. Donc, à 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 mais également comme des données répertoriées.

Donc au final ce que j’ai fait était:

 
  • ... ... ... ... ...

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

Ensuite, en CSS, je définis les éléments span à display:block; et float:left; (Je préfère cette combinaison au inline-block en inline-block car cela fonctionnera dans les anciennes versions d’IE, pour effacer l’effet float, voir: http://css-sortingcks.com/snippets/css/clear-fix/ ) et aussi 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 les max-widths de vos scopes et cela donnera à la liste une apparence de tableau.

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 stylée avait l’air meilleure et permettait toujours à l’utilisateur de visualiser et de sélectionner la chaîne complète si nécessaire.

  

Il ressemble à un champ de texte, mais il est plus facile à utiliser

Si vous ne voulez pas définir max-width à td (comme dans cette réponse ), vous pouvez définir max-width à 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 le tour dans FF. D’autres navigateurs modernes n’ont pas besoin de bidouilles div.

 td {
   bordure: 1px noir uni;
     padding-left: 5px;
     padding-right: 5px;
 }
 td> div {
     largeur max: 99%;
     débordement caché;
     dépassement de texte: points de suspension;
     espace blanc: Nowrap;

 }

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