剪辑的文本在 Chrome 中有效，但在 IE9 中无效？答案

【问题标题】：clipped text works in Chrome but not in IE9?剪辑的文本在 Chrome 中有效，但在 IE9 中无效？
【发布时间】：2013-06-07 05:45:17
【问题描述】：

我有一些代码在 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，仍然看到这个：

当 'white-space: nowrap' 开启时，它似乎没有响应 'max-width'。（如果我取消选中 nowrap 然后它会换行文本并且宽度会缩小到 150px）

【问题讨论】：

标签： asp.net internet-explorer css google-chrome

【解决方案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，但它确实显示了问题所在）。

【讨论】：

哇，我不敢相信我没想过要尝试...谢谢 Lister 先生，您让我免于彻底失败。

【解决方案2】：

documentation 表示值是：

text-overflow: ellipsis | clip

none 的值不会应用任何剪辑。理论上你不应该需要溢出。

【讨论】：

感谢 Kinlan，我已经调整了我的问题以包含您发布的内容。