ansaurus

Question

ASP.NET GridView - Prevent Word-Wrapping in Column

Answer 1

+2 A:

Table of contents

Illustration of problem
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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

knut 2009-04-23 16:10:33

Does not work. Prevents the white space, but then expands the width ridiculously. Applying max-width does not work either. I need it to truncate text in order to make the width correct.

Josh Stodola 2009-04-23 19:46:50

Answer 2

A:

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:

Keltex 2009-04-23 16:14:56

I will give this a try. Although instead of using a class name like this I think I would rather do this selector: #gridViewId td { }

Josh Stodola 2009-04-23 16:45:02

That's why I had my caveat.

Keltex 2009-04-23 18:22:25

Does not work. I am using IE7. I also tried it in combination with white-space:nowrap and overflow:hidden with no luck.

Josh Stodola 2009-04-23 19:50:33

It works when applying table-layout:fixed to <table> tag, but then my columsn are equal width. Now I will try to fix that.

Josh Stodola 2009-04-23 20:14:42

ansaurus

tags:

views:

answers:

ASP.NET GridView - Prevent Word-Wrapping in Column

related questions