Dynamiquement raccourcir/masquer/chevaucher tekst dans les cellules de tableau quand trop long

Question

Ma table a des valeurs de largeur statiques mais parfois les cellules de tableau d'une certaine colonne peuvent contenir du texte trop long et qui gâche la largeur de la table. Je cherche un moyen de raccourcir dynamiquement le texte (un peu comme une fonctionnalité de grille de table mais sans grille) car il peut être de longueur variable, et quand on survole la cellule du tableau, le texte entier est affiché sans étirer la table .

Actuellement, j'ai ce codé en dur dans mon script de la manière suivante: string.substring(0, 65) + '...'; et en passant le texte intégral à l'attribut 'title' de la cellule du tableau.

Notez que je ne souhaite pas continuer à utiliser l'attribut 'title'. J'ai essayé d'entourer le texte avec <span style='position: absolute; background: #EEE'></span> lorsqu'il a été déclenché par l'événement planant, mais malheureusement ce n'était pas une solution attrayante car le texte se déplaçait un peu vers le bas tandis que le rembourrage et le style de marge étaient changés.

La solution peut également être un plugin jQuery ou un script JavaScript.

Answer 1

1. Raccourcir les données originales

Je suggère que vous considérez comme quelque chose de plus élégant que couper la chaîne au 65ème caractère. - Au lieu de cela, cherchez les espaces blancs pour casser la chaîne. Ne hachez que le mot au milieu si aucun espace n'est trouvé. Pour enregistrer plus d'espace dans la cellule de tableau, utilisez le caractère ellipses ... au lieu de trois périodes ... Il suffit de copier/coller à partir de cette réponse. Le caractère ellipses peut également être stylisé avec une police différente ou plus petite.

2. Affichage des données originales sur vol stationnaire

Je préfère YUI. Leur widget tooltip fonctionne bien pour cela. Un example.

Answer 2

Vous devriez essayer cette instruction CSS:

td { break-word: word-wrap; } 

qui fonctionne dans de nombreux navigateurs (oui, y compris IE 6, même IE 5.5, mais pas Fx 3.0 Il est reconnu que par Fx3.5 + aussi.. bon pour Saf, Chr et Op mais je ne connais pas la version exacte pour ceux-ci) et ne fais pas de mal aux autres.

Si la largeur de la table est toujours foiré, il y a aussi:

table { table-layout: fixed; } 
th, td { width: some_value; } 

qui forcera le navigateur à utiliser l'autre algorithme de table, celui où il ne cherche pas à adapter de nombreuses situations, y compris maladroits mais s'en tenir à ce que dit la feuille de style.