ASP.NET GridView - Impedir Palavra-Envolvendo na Coluna

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

  •  13-09-2019
  •  | 
  •  

Pergunta

Em um GridView ASP.NET, eu tenho um campo que imprime uma string a partir do banco de dados. Estes dados podem variar de 10 a 100 caracteres. Quando se é mais longo do que o normal, o campo de palavra-quebra os dados, tornando a linha ocupam mais espaço vertical que os outros. Eu quero truncar quaisquer dados que não se encaixam na linha, e depois ter um "..." ao lado dele para indicar que há mais. Eu não preciso que lhes permitam redimensionar, eu só não quero que nenhuma linha de altura diferente. Eu estou esperando que isso pode ser feito de forma dinâmica no lado do cliente, para fins de SEO.

Veja a ActiveWidgets Grade aqui , e redimensionar o nome da empresa para que ele não se encaixa. Você vai notar que ele não quebra o conteúdo, mas em vez disso faz exatamente o que eu quero fazer.

Como posso aplicar esta técnica para um GridView ASP.NET? Presumo alguns Javascript está envolvido. Se isso for verdade, eu preferiria não usar uma biblioteca como jQuery (não pergunte por que - eu não estou autorizado a usar uma dependência externa para este projeto).

Foi útil?

Solução

Índice

  1. Ilustração de problema
  2. Ilustração de uma solução

Ilustração de problema
Copie o seguinte HTML em seus navegadores (pelo menos Firefox e Internet Explorer 7, mas você deve tentar Opera também): 

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

Observe que o elemento td não esconde o conteúdo transbordar. Apenas o elemento div nows como fazer isso. elemento td do Internet Explorer ainda não sabe como parar envolvendo o conteúdo.

A rigor, de acordo com a padrão , o elemento td não suporta a regra white-space. Os elementos div e th fazer.

Ilustração de uma solução
Esta é um solução para o problema (Testado em 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>

Outras dicas

Se você sabe que seu usuário está usando o Internet Explorer, você pode usar o seguinte IE única CSS: 

td.nooverflow
{
  text-overflow:ellipsis;
}

Em seguida, defina o ItemStyle para a coluna que você deseja corrigir a largura como <ItemStyle CssClass='nooverfolow'/> (você vai precisar para jogar com a CSS para obter o direito para a sua aplicação)

Infelizmente uma vez que este é IE somente, para outros navegadores, existem alguns hacks disponíveis para simular a mesma coisa:

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top