Débordement de texte CSS dans une cellule de tableau?
Je souhaite utiliser CSS text-overflow dans une cellule de tableau, de telle sorte que si le texte est trop long pour tenir sur une ligne, il sera découpé avec un Ellipsis au lieu d'être renvoyé à plusieurs lignes. Est-ce possible?
J'ai essayé ceci:
td {
overflow: hidden;
text-overflow: Ellipsis;
white-space: nowrap;
}
Mais le white-space: nowrap semble faire en sorte que le texte (et sa cellule) s’agrandisse continuellement vers la droite, poussant la largeur totale du tableau au-delà de la largeur de son conteneur. Sans cela, toutefois, le texte continue de se terminer sur plusieurs lignes lorsqu'il atteint le bord de la cellule.
Pour couper du texte avec un ellipse lorsqu'il dépasse d'une cellule de tableau, vous devez définir la propriété max-width CSS sur chaque classe td pour que le dépassement de capacité fonctionne. Aucune présentation supplémentaire requise
td {
max-width: 100px;
overflow: hidden;
text-overflow: Ellipsis;
white-space: nowrap;
}
Pour des mises en page réactives; utilisez la propriété max-width CSS pour spécifier la largeur minimale effective de la colonne ou utilisez simplement max-width: 0; pour une flexibilité illimitée. En outre, la table contenant aura besoin d'une largeur spécifique, généralement width: 100%;, et la largeur des colonnes sera définie en pourcentage de la largeur totale.
table {
width: 100%;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: Ellipsis;
white-space: nowrap;
}
td.columnA {
width: 30%;
}
td.columnB {
width: 70%;
}
Historique: Pour IE 9 (ou moins), vous devez l'indiquer dans votre code HTML afin de résoudre un problème de rendu spécifique à IE.
<!--[if IE]>
<style>
table {
table-layout: fixed;
width: 100px;
}
</style>
<![endif]-->
Spécifier un max-width ou une largeur fixe ne fonctionne pas dans toutes les situations et le tableau doit être fluide et auto-espacer ses cellules. C'est à quoi servent les tables.
Utilisez ceci: http://jsfiddle.net/maruxa1j/
HTML:
<td class="Ellipsis">
<span>This Text Overflows and is too large for its cell.</span>
</td>
CSS:
.Ellipsis {
position: relative;
}
.Ellipsis:before {
content: ' ';
visibility: hidden;
}
.Ellipsis span {
position: absolute;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
}
Fonctionne sur IE9 et d'autres navigateurs.
Pourquoi cela se produit-il?
Il semble que cette section sur w3.org suggère que le débordement de texte 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
This jsfiddle a votre code (avec quelques modifications de débogage), ce qui fonctionne très bien s’il est appliqué à un div au lieu d’un td. C'est aussi la seule solution à laquelle je pourrais rapidement penser en encapsulant le contenu de la variable td dans un bloc contenant div. Cependant, cela ressemble à du balisage "moche" pour moi, donc j'espère que quelqu'un d'autre aura une meilleure solution. Le code à tester 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>Si vous ne souhaitez pas définir de largeur fixe
La solution ci-dessous vous permet d'avoir un contenu de cellule de tableau long, mais ne doit pas affecter la largeur du tableau parent ni la hauteur de la ligne parent. Par exemple, vous souhaitez que la table width:100% applique toujours la fonction de dimensionnement automatique à toutes les autres cellules. Utile dans les grilles de données avec la colonne "Notes" ou "Commentaire".
Ajoutez ces 3 règles à votre CSS:
.text-overflow-dynamic-container {
position: relative;
max-width: 100%;
padding: 0 !important;
display: -webkit-flex;
display: -moz-flex;
display: flex;
vertical-align: text-bottom !important;
}
.text-overflow-dynamic-Ellipsis {
position: absolute;
white-space: nowrap;
overflow-y: visible;
overflow-x: hidden;
text-overflow: Ellipsis;
-ms-text-overflow: Ellipsis;
-o-text-overflow: Ellipsis;
max-width: 100%;
min-width: 0;
width:100%;
top: 0;
left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-Ellipsis:after {
content: '-';
display: inline;
visibility: hidden;
width: 0;
}
Mettez en forme le code HTML de cette manière dans n'importe quelle cellule de tableau pour laquelle vous souhaitez un débordement de texte dynamique:
<td>
<span class="text-overflow-dynamic-container">
<span class="text-overflow-dynamic-Ellipsis" title="...your text again for usability...">
//...your long text here...
</span>
</span>
</td>
Appliquez en outre le min-width (ou aucun) souhaité à la cellule du tableau.
Bien sûr, le violon: https://jsfiddle.net/9wycg99v/23/
Il semble que si vous spécifiez table-layout: fixed; sur l'élément table, vos styles pour td devraient alors prendre effet. Cela affectera également la façon dont les cellules sont dimensionnées.
Sitepoint discute un peu des méthodes de disposition de la table ici: http://reference.sitepoint.com/css/tableformatting
Si vous voulez juste que la table soit automatiquement mise en page
Sans en utilisant max-width, ou en largeur de colonne, ou table-layout: fixed etc.
https://jsfiddle.net/tturadqq/
Comment ça fonctionne:
Étape 1: Laissez simplement la mise en page automatique faire son travail.
Lorsqu'il y a une ou plusieurs colonnes avec beaucoup de texte, cela réduira autant que possible les autres colonnes, puis enroulera le texte des longues colonnes:
Étape 2: Enveloppez le contenu d'une cellule dans un div, puis définissez ce div en max-height: 1.1em
(le 0.1em supplémentaire est pour les caractères qui rendent un peu en dessous de la base du texte, comme la queue de 'g' et 'y')
Étape 3: Définissez title sur les div
C'est bon pour l'accessibilité, et c'est nécessaire pour le petit truc que nous allons utiliser dans un moment.
Étape 4: Ajoutez un CSS ::after sur le div
C'est la partie la plus délicate. Nous définissons un CSS ::after, avec content: attr(title), puis nous le positionnons au-dessus du div et nous plaçons text-overflow: Ellipsis. Je l'ai colorié en rouge ici pour le rendre clair.
(Notez comment la longue colonne a maintenant un Ellipsis de queue)
Étape 5: définissez la couleur du texte div sur transparent
Et nous avons fini!
Lorsque la largeur de la table est exprimée en pourcentage ou que vous ne pouvez pas définir de largeur fixe sur la cellule de la table. Vous pouvez appliquer table-layout: fixed; pour que cela fonctionne.
_table {
table-layout: fixed;
width: 100%;
}
td {
text-overflow: Ellipsis;
white-space: nowrap;
overflow: hidden;
border: 1px solid red;
}__<table>
<tr>
<td>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.</td>
<td>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.</td>
</tr>
</table>_Envelopper le contenu de la cellule dans un bloc flexible. En prime, l'auto cellule s'adapte à la largeur visible.
table {
width: 100%;
}
div.parent {
display: flex;
}
div.child {
flex: 1;
width: 1px;
overflow-x: hidden;
text-overflow: Ellipsis;
}<table>
<tr>
<td>
<div class="parent">
<div class="child">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
<div>
</td>
</tr>
</table>J'ai résolu ce problème en utilisant un div positionné de manière absolue à l'intérieur de la cellule (relative).
td {
position: relative;
}
td > div {
position: absolute;
white-space: nowrap;
overflow: hidden;
text-overflow: Ellipsis;
max-width: 100%;
}
C'est ça. Ensuite, vous pouvez soit ajouter un top: value à la div, soit le centrer verticalement:
td > div {
top: 0;
bottom: 0;
margin: auto 0;
height: 1.5em; // = line height
}
Pour obtenir un peu d'espace sur le côté droit, vous pouvez réduire un peu la largeur maximale.