ASP.NET GridView - Prevent Word-Wrapping in Column

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

  •  13-09-2019
  •  | 
  •  

Question

On an ASP.NET GridView, I have a field that prints a string from the database. This data can range from 10 to 100 characters. When it is longer than normal, the field word-wraps the data, making the row take up more vertical space than the others. I want to truncate any data that does not fit on the row, and then have a "..." next to it to indicate there is more. I don't need to allow them to resize, I just don't want any rows of different height. I'm hoping this can be done dynamically on the client-side, for SEO purposes.

See the ActiveWIdgets Grid here, and resize the company name so that it does not fit. You will notice that it does not wrap the contents, but it instead does exactly what I want to do.

How can I apply this technique to an ASP.NET GridView? I assume some Javascript is involved. If that is true, I would prefer to NOT use a library like jQuery (don't ask why -- I am not allowed to use an external dependency for this project).

Was it helpful?

Solution

Table of contents

  1. Illustration of problem
  2. Illustration of one solution

Illustration of problem
Copy the following HTML into your browsers (at least Firefox and Internet Explorer 7, but you should try Opera too):

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

Notice that the td element does not hide the overflowing content. Only the div element nows how to do this. Internet Explorer's td element does not even know how to stop wrapping the content.

Strictly speaking, according to the standard, the td element does not support the white-space rule. The div and th elements do.

Illustration of one solution
This is one solution to the problem (Tested in Opera, Firefox and 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>

OTHER TIPS

If you know your user is using Internet Explorer, you can use the following IE only CSS:

td.nooverflow
{
  text-overflow:ellipsis;
}

Then set the ItemStyle for the column you want to fix the width of as <ItemStyle CssClass='nooverfolow'/> (you'll need to play with the CSS to get it right for your application)

Unfortunately since this is IE only, for other browsers, there are some hacks available to simulate the same thing:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top