GridView中文本过长用CSS实现截取隐藏文字(asp.net)

有时候文字太长时会影响页面的布局,需要把后面的隐藏掉,只显示省略号(...),对于div标签比较容易
如:
.content
     {
         width:100px;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;/*以省略号替代截除部分*/
     }
    
<div class="content">隐藏过长的文字</div>
而对于table和GridView却不能实现,其实GridView最终也是解析为table在页面显示,所以用GridView为例。
1、定义如下CSS样式
   .tableCSS
     {
         table-layout: fixed;
     }
     .content
     {
         width:100%;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;/*以省略号替代截除部分*/
     }
2、为GridView设置样式
   <asp:GridView CssClass="tableCSS"   必需要为整个table或GridView添加样式 且table-layout:的值必需为fixed
对于要隐藏的列添加样式,如
   <asp:BoundField DataField="MainTitle" HeaderText="内容">
         <temStyle Width="42%" CssClass="content" />
         <HeaderStyle Width="42%" />
   </asp:BoundField>
由于样式table-layout: fixed;会把各列都设为相同的宽度,所以需要为每列添加类似设置<HeaderStyle Width="42%" />,以确定每列的宽
完成上面的工作即可看到效果,由于内容被隐藏了部分,想要当鼠标放上去时显示以提示的方式查看时,在GridView的RowDataBound事件中添加如下代码即可
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
     e.Row.Cells[5].ToolTip = e.Row.Cells[5].Text;   //内容
   }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值