ASP.NET Gridview - Prevent Zeilenumbruch in Spalte

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

  •  13-09-2019
  •  | 
  •  

Frage

Auf einer ASP.NET Gridview habe ich ein Feld, das eine Zeichenfolge aus der Datenbank druckt. Diese Daten können von 10 bis 100 Zeichen reichen. Wenn es länger als normal ist, Wraps Wort des Feldes, um die Daten, die Reihe nimmt mehr vertikalen Raum als die andere machen. Ich möchte alle Daten kürzen, die nicht auf die Reihe passt, und dann haben ein „...“ neben ihm, um anzuzeigen, es gibt noch mehr. Ich brauche nicht zu erlauben sie, um die Größe, ich will nur keine Zeilen unterschiedlicher Höhe. Ich hoffe, dies kann dynamisch auf der Client-Seite durchgeführt wird, für SEO Zwecke.

Sehen Sie die Active Grid hier , und die Größe des Firmennamens, so dass es nicht passt. Sie werden feststellen, dass es nicht um den Inhalt nicht wickeln, aber es stattdessen tut genau das, was ich tun möchte.

Wie kann ich diese Technik zu einem ASP.NET-Gridview anwenden? Ich gehe davon einige Javascript beteiligt ist. Wenn das stimmt, ich würde es vorziehen, nicht eine Bibliothek wie jQuery (nicht fragen, warum - ich bin nicht eine externe Abhängigkeit für dieses Projekt zu verwenden, erlaubt).

War es hilfreich?

Lösung

Inhaltsverzeichnis

  1. Abbildung des Problems
  2. Illustration einer Lösung

Abbildung Problem
Kopieren Sie den folgenden HTML-Code in Ihren Browser (mindestens Firefox und Internet Explorer 7, aber Sie sollten versuchen Opera auch): 

<!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>

Beachten Sie, dass das td Element nicht die überquellenden Inhalte verborgen. Nur das div Element nows, wie dies zu tun. Internet Explorer td Element nicht einmal wissen, wie der Inhalt zu stoppen gewickelt wird.

Genau genommen nach dem Standard , wird das td Element nicht die white-space Regel unterstützen. Die div und th Elemente tun.

Illustration einer Lösung
Dies ist eine Lösung für das Problem (getestet in Opera, Firefox und 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>

Andere Tipps

Wenn Sie Ihren Benutzer wissen Internet Explorer verwenden, können Sie die folgende IE nur CSS verwendet werden: 

td.nooverflow
{
  text-overflow:ellipsis;
}

Stellen Sie dann den ItemStyle für die Spalte Sie die Breite fixieren wollen als <ItemStyle CssClass='nooverfolow'/> (Sie brauchen, um mit der CSS spielen es für Ihre Anwendung richtig zu machen)

Leider, da dies nur IE ist, für anderen Browser gibt es einige Hacks zur Verfügung, das Gleiche zu simulieren:

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top