列表中如何只显示部分文本，多余的以省略号代替

最新推荐文章于 2024-01-29 22:35:39 发布

最新推荐文章于 2024-01-29 22:35:39 发布 · 811 阅读

文章标签：

#ASP #HTML

GridView 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在ASP.NET的GridView中实现字段内容的截断显示，包括针对不同IE版本的兼容性处理方法，以及使用UpdatePanel提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果咱就不展示了，字面已经表达很清楚了。

首先IE8下面的写法，很简单


<style type="text/css">
.content{
         width:200px; 
         overflow:hidden; 
         text-overflow:ellipsis;
         white-space:nowrap; 
         margin:0 auto; 
         text-decoration: none;
         float:left;
            }
</style>
下面是在需要的列上指向这个样式即可，例如
<asp:BoundField DataField="BusinessScope" HeaderText="经营范围" ReadOnly="True" ItemStyle-CssClass="content" />

如果是IE6,IE7，则上面没有效果


样式不变，变的底下，因为asp:BoundField最后会变成TD,TD这东西真是麻烦
先看实现的
<asp:TemplateField HeaderText="经营范围">
                    <ItemTemplate>
                        <asp:Label ID="lblBusinessScope" runat="server" ToolTip='<%#Eval("BusinessScope") %>' CssClass="content"><%#Eval("BusinessScope")%></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
将其替换上面那个即可。

听说还有一种方法
这个指定TABLE,即asp:GridView(这个最后会生成TABLE

 .gv
     {
         width:100%;table-layout: fixed;
     }
这个指定TD（即各个字段）
.contentTd{
         width:200px; overflow:hidden; text-overflow:ellipsis; white-space:pre;  margin:0 auto;
            }
例如：
 <asp:GridView ID="gvCust" runat="server" AutoGenerateColumns="False" DataKeyNames="CustId"  CssClass="gv"

这个会出现一个问题，就是第一页(加入是分页，别的没测试过)，这个生成的表格会拉伸到最底部，而不是你预期想的只是那么大。
不过点击下一页，那么又变成你所满足的了，你想要的字段就显示在一行，多余的全部变...
再加上<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>和<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate> </ContentTemplate>
</asp:UpdatePanel>
那么真个页面就感觉不动似得，太完美了。用户体验超好。
可惜第一页是那样子，暂时无法解决。
以及听说使用UpdatePanel 性能很差，不晓得差在哪里。
我这边2W多条数据做分页，差出速度还是不错的。