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

StackOverflow https://stackoverflow.com/questions/782428

  •  13-09-2019
  •  | 
  •  

Question

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 varier de 10 à 100 caractères. Quand il est plus que la normale, le champ mot enveloppe les données, ce qui rend la ligne prennent plus d'espace vertical que les autres. Je veux tronquer les données qui ne correspondent pas à la ligne, puis un « ... » à côté de lui pour indiquer qu'il ya plus. Je ne ai pas besoin pour leur permettre de redimensionner, je ne veux pas de lignes de hauteur différente. J'espère que cela peut être fait de façon dynamique sur le côté client, à des fins de référencement.

Voir la ActiveWidgets Grille et redimensionner le nom de l'entreprise afin qu'elle ne correspond pas. Vous remarquerez qu'il ne boucle pas le contenu, mais il place exactement ce que je veux faire.

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

Était-ce utile?

La solution

Table des matières

  1. Illustration problème
  2. 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 cache pas le contenu qui déborde. Seul l'élément de div nows comment faire cela. L'élément td d'Internet Explorer ne sait même pas comment arrêter envelopper le contenu.

A strictement parler, selon la norme , l'élément td ne supporte pas la règle de white-space. Les éléments de div et th 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>

Autres conseils

Si vous savez que votre utilisateur utilise Internet Explorer, vous pouvez utiliser l'IE suivant uniquement CSS: 

td.nooverflow
{
  text-overflow:ellipsis;
}

Définissez ensuite les 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, puisque c'est IE uniquement, pour les autres navigateurs, il y a quelques hacks disponibles pour simuler la même chose:

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top