ASP.NET GridView - Impedir que Word-envolver en la Columna

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

  •  13-09-2019
  •  | 
  •  

Pregunta

En un GridView ASP.NET, tengo un campo que imprime una cadena de la base de datos. Estos datos pueden variar de 10 a 100 caracteres. Cuando es más de lo normal, el campo de palabras acomoda los datos, por lo que la fila ocupa espacio más vertical que los otros. Quiero truncar cualquier dato que no cabe en la fila, y luego tener un "..." al lado de él para indicar que hay más. No necesito que les permita cambiar el tamaño, sólo que no quiero ninguna fila de diferente altura. Estoy esperando que esto se puede hacer de forma dinámica en el lado del cliente, para fines de SEO.

Vea la ActiveWidgets cuadrícula aquí , y cambiar el tamaño del nombre de la empresa para que no encaja. Usted se dará cuenta de que no se ajusta el contenido, sino que en su lugar hace exactamente lo que yo quiero hacer.

¿Cómo puedo aplicar esta técnica a un GridView ASP.NET? Asumo algo de JavaScript está involucrado. Si eso es cierto, yo preferiría no utilizar una biblioteca como jQuery (no preguntes por qué - no se me permite utilizar una dependencia externa para este proyecto).

¿Fue útil?

Solución

Tabla de contenidos

  1. ilustración de un problema
  2. ilustración de una solución

ilustración de un problema
Copia el siguiente código HTML en su navegador (al menos Firefox e Internet Explorer 7, pero usted debe tratar Opera también): 

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

Tenga en cuenta que el elemento td no oculta el contenido desbordante. Sólo el elemento div nows cómo hacer esto. elemento td de Internet Explorer ni siquiera sabe cómo dejar de envolver el contenido.

Estrictamente hablando, de acuerdo con la estándar , el elemento td no es compatible con la regla white-space. Los elementos div y th hacen.

ilustración de una solución
Este es un solución al problema (Probado en 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>

Otros consejos

Si sabe que su usuario está utilizando Internet Explorer, puede utilizar el siguiente IE sólo CSS: 

td.nooverflow
{
  text-overflow:ellipsis;
}

A continuación, establezca la ItemStyle para la columna que desea fijar la anchura de tan <ItemStyle CssClass='nooverfolow'/> (que tendrá que jugar con el CSS para hacer las cosas bien para su aplicación)

Por desgracia, ya que esto es sólo IE, para otros navegadores, hay algunos hacks disponibles para simular lo mismo:

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top