我有一些代码可以在 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>
如果可能的话,我想在绑定(bind)时不更改文本的情况下执行此操作。我只是不明白为什么 IE 有问题。 模式和标准是IE9。
编辑:根据 Kinlan 的帖子更改了 css,仍然看到这个:
当“white-space: nowrap”打开时,它似乎没有响应“max-width”。 (如果我取消选中 nowrap 然后它会换行文本并且宽度缩小到 150px)
最佳答案
这与 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,但它确实显示了问题所在)。
关于asp.net - 剪切文本在 Chrome 中有效,但在 IE9 中无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17043041/