CODEWITHSUNDEEP
asp.netinternet-explorercssgoogle-chrome
RazorUK84
RazorUK84

Reputation: 183

clipped text works in Chrome but not in IE9?

I have a bit of code that works exactly as required in Chrome, but not in IE9.

My objective is to have a grid cell that clips it's text according to a maximum column width, does not wrap the text and shows the full text in a tooltip. In internet explorer the cell does not clip, but is stretched far across the page, causing the need to scroll around.

The css I use is this:

.gridMaxWidth150
{
    max-width: 150px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

The gridview column:

<asp:TemplateField 
    HeaderText="Comments" 
    ItemStyle-CssClass="gridMaxWidth150" 
    ItemStyle-Wrap="false" >
    <ItemTemplate>
        <asp:Label ID="lblComment" runat="server" 
            Text='<%# Bind("Comments") %>' 
            Tooltip='<%#: Bind("Comments") %>' />
    </ItemTemplate>
</asp:TemplateField>

I want to do this without altering the text at bind time if possible. I just can't understand why IE has a problem with it. Mode and standard are IE9.

Edit: changed css according to Kinlan's post, still seeing this:

comments column expanding

It doesn't seem to respond to the 'max-width' when the 'white-space: nowrap' is on. (if I uncheck the nowrap then it wraps the text and the width shrinks down to 150px)

Upvotes: 0

Views: 338

Answers (2)

Mr Lister
Mr Lister

Reputation: 46569

This doesn't have anything to do with the text-overflow property. It's just that IE seems to have troubles keeping the widths on table cells down.

One solution is to wrap the label in a div in the table cell and apply the style to the div.

<ItemTemplate>
   <div class="gridMaxWidth150">
      <asp:Label ID="lblComment" runat="server" 
         Text='<%# Bind("Comments") %>' 
         Tooltip='<%#: Bind("Comments") %>' />
   </div>
</ItemTemplate>

See this fiddle (not ASP.NET based of course, but it does show what the problem is).

Upvotes: 1

Kinlan
Kinlan

Reputation: 16597

The documentation says the values are:

text-overflow: ellipsis | clip

A value of none will not apply any clipping. In theory you shouldn't need overflow.

Upvotes: 0

Related Questions