剪辑文本在Chrome中有效但在IE9中无效吗?

时间:2013-06-11 11:31:42

标签: asp.net css internet-explorer css3 google-chrome

我有一些代码可以完全按照Chrome的要求运行,但不能用于IE9。

我的目标是让网格单元根据最大列宽剪切它的文本,不包装文本并在工具提示中显示全文。 在Internet Explorer中,单元格不会剪辑,但会在页面上拉伸,导致需要滚动。

我使用的CSS是:

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

gridview专栏:

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

如果可能的话,我想在绑定时不改变文本的情况下这样做。我只是无法理解为什么IE有问题。 模式和标准是IE9。

编辑:根据Kinlan的帖子更改了css,仍然看到了这个:

comments column expanding

当'white-space:nowrap'打开时,它似乎没有响应'max-width'。 (如果我取消选中nowrap然后它包装文本,宽度缩小到150px)

2 个答案:

答案 0 :(得分:1)

这与text-overflow属性无关。只是IE似乎在保持表格单元格的宽度方面遇到了麻烦。

一种解决方案是将标签包装在表格单元格中的div中,并将样式应用于div。

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

请参阅此fiddle(当然不是基于ASP.NET的,但确实显示了问题所在。)

答案 1 :(得分:0)

documentation表示值为:

text-overflow: ellipsis | clip

none不会应用任何剪辑。从理论上讲,你不应该需要溢出。