当前位置: 首页 > 资料仓库 > 正文

[分享]Dvi+Css框架页面中文本过长用CSS实现截取隐藏文字

有时候文字太长时会影响页面的布局div标签,需要把后面的隐藏掉,只显示省略号(…),对于div标签比较容易
如:
.content
{
width:100px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

<div class="content">隐藏过长的文字</div>
而对于table和GridView却不能实现div标签,其实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%" />div标签,以确定每列的宽
完成上面的工作即可看到效果div标签,由于内容被隐藏了部分,想要当鼠标放上去时显示以提示的方式查看时div标签div标签,在GridView的RowDataBound事件中添加如下代码即可
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[5].ToolTip = e.Row.Cells[5].Text; //内容
}
 

本文固定链接: http://blog.ich8.com/post/289 | 霸王硬上弓's Blog

avatar
该日志由 霸王硬上弓 于2010年09月03日发表在 资料仓库 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: [分享]Dvi+Css框架页面中文本过长用CSS实现截取隐藏文字 | 霸王硬上弓's Blog

[分享]Dvi+Css框架页面中文本过长用CSS实现截取隐藏文字:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!