ASP.NET GridView - Empêcher Word-emballage dans la colonne

Sur une ASP.NET GridView, j'ai un champ qui imprime une chaîne à partir de la base de données. Ces données peuvent aller de 10 à 100 caractères. Lorsqu'il est plus long que la normale, le mot de champ enveloppe les données, ce qui fait que la ligne occupe plus d'espace vertical que les autres. Je veux tronquer toutes les données qui ne rentrent pas dans la rangée, puis ajouter "..." à côté pour indiquer qu'il y en a plus. Je n'ai pas besoin de leur permettre de redimensionner, je ne veux tout simplement pas de lignes de hauteur différente. J'espère que cela peut être fait dynamiquement du côté du client, à des fins de référencement.ASP.NET GridView - Empêcher Word-emballage dans la colonne

Voir la ActiveWIdgets Grid here et redimensionnez le nom de l'entreprise afin qu'elle ne correspond pas. Vous remarquerez qu'il n'emballe pas le contenu, mais qu'il fait exactement ce que je veux faire.

Comment puis-je appliquer cette technique à un ASP.NET GridView? Je suppose que Javascript est impliqué. Si cela est vrai, je préfère utiliser pas une bibliothèque comme jQuery (ne demandez pas pourquoi - je ne suis pas autorisé à utiliser une dépendance externe pour ce projet).

Source

2009-04-23 Josh Stodola

Table des matières

Illustration du problème
Illustration d'une solution

Illustration problème
Copiez le code HTML suivant dans votre navigateur (au moins Firefox et Internet Explorer 7, mais vous devriez essayer Opera aussi):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     div, td 
     { 
      width: 100px; 
      border: solid 1px black; 
      white-space: nowrap; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <div> 
     content content content content content content 
    </div> 
    <table cellpadding="0" cellspacing="0"> 
     <tbody> 
      <tr> 
       <td> 
        content content content content content content 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Notez que l'élément td ne masque pas le contenu débordant. Seul l'élément div sait comment procéder. L'élément td d'Internet Explorer ne sait même pas comment arrêter d'encapsuler le contenu. À strictement parler, selon l'standard, l'élément td ne prend pas en charge la règle white-space. Les éléments div et th le font.

Illustration d'une solution
Ceci est une solution au problème (testé dans Opera, Firefox et Internet Explorer 7):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     td 
     { 
      border: solid 1px black; 
     } 
     div 
     { 
      width: 100px; 
      white-space: nowrap; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0"> 
     <tbody> 
      <tr> 
       <td> 
        <div> 
         content content content content content content 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Source

2009-04-23 16:10:33 knut

ne fonctionne pas. Empêche l'espace blanc, mais étend ensuite la largeur ridiculement. L'application de la largeur maximale ne fonctionne pas non plus. J'en ai besoin pour tronquer le texte afin de rendre la largeur correcte. –

Si vous savez que votre utilisateur utilise Internet Explorer, vous pouvez utiliser le seul IE CSS suivant:

td.nooverflow 
{ 
    text-overflow:ellipsis; 
}

Réglez ensuite le ItemStyle pour la colonne que vous voulez fixer la largeur comme <ItemStyle CssClass='nooverfolow'/> (vous aurez besoin de jouer avec le CSS pour l'obtenir pour votre application)

Malheureusement, depuis c'est IE uniquement, pour les autres navigateurs, il y a quelques hacks disponibles pour simuler la même chose:

Source

2009-04-23 16:14:56 Keltex

Je vais essayer. Bien que, au lieu d'utiliser un nom de classe comme celui-ci, je préfère faire ce sélecteur: #gridViewId td {} –

C'est pourquoi j'ai eu mon avertissement. – Keltex

Ne fonctionne pas. J'utilise IE7. Je l'ai aussi essayé en combinaison avec white-space: nowrap et overflow: caché sans chance. –

ASP.NET GridView - Empêcher Word-emballage dans la colonne

Répondre

Questions connexes