ASP.NET GridView - Impedire Word-Wrapping nella colonna

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

  •  13-09-2019
  •  | 
  •  

Domanda

In un'ASP.NET GridView, Ho un campo che stampa una stringa dal database. Questi dati possono variare da 10 a 100 caratteri. Quando è più lungo del normale, il campo parola avvolge i dati, rendendo la riga occupa spazio più verticale rispetto agli altri. Voglio di troncare tutti i dati che non si adatta sulla riga, e poi hanno un "..." accanto ad essa per indicare c'è di più. Non ho bisogno per consentire loro di ridimensionare, solo che non voglio che tutte le righe di diversa altezza. Spero che questo può essere fatto in modo dinamico sul lato client, per scopi SEO.

Vedere la ActiveWidgets griglia qui , e ridimensionare il nome della società in modo che non si adatta. Si noterà che essa non va a capo il contenuto, ma ha invece esattamente quello che voglio fare.

Come posso applicare questa tecnica a un ASP.NET GridView? Presumo alcuni Javascript è coinvolto. Se questo è vero, io preferirei non usare una libreria come jQuery (non chiedere perché - non mi è permesso di utilizzare una dipendenza esterna per questo progetto).

È stato utile?

Soluzione

Indice

  1. illustrazione di problema
  2. illustrazione di una soluzione

illustrazione di problema
Copiare il seguente codice HTML nel vostro browser (almeno Firefox e Internet Explorer 7, ma si dovrebbe provare Opera troppo): 

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

Si noti che l'elemento td non nasconde il contenuto traboccante. Solo l'elemento div nows come fare questo. Elemento td di Internet Explorer non sa nemmeno come fermare avvolgendo il contenuto.

A rigor di termini, secondo il di serie , l'elemento td non supporta la regola white-space. Gli elementi div e th fanno.

illustrazione di una soluzione
Si tratta di una soluzione al problema (testato in Opera, Firefox e 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>

Altri suggerimenti

Se conoscete il vostro utente sta usando Internet Explorer, è possibile utilizzare il seguente IE solo i CSS: 

td.nooverflow
{
  text-overflow:ellipsis;
}

Quindi impostare l'ItemStyle per la colonna che si desidera correggere la larghezza di come <ItemStyle CssClass='nooverfolow'/> (avrete bisogno di giocare con il CSS per farlo bene per la vostra applicazione)

Purtroppo dal momento che questo è solo IE, per altri browser, ci sono alcuni hack disponibili per simulare la stessa cosa:

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top