html文字太长隐藏,[分享]Dvi+Css框架页面中文本过长用CSS实现截取隐藏文字 | 霸王硬上弓's Blog...

有时候文字太长时会影响页面的布局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; //内容

}