创建.....当Div中出现溢出时

时间:2013-09-02 04:38:37

标签: jquery asp.net css html

我正在使用asp.net。我试图将数据插入列表视图。我的代码smaple是这样的:

     <ul class="toplistings">
                <asp:ListView ID="LatestRatingBusinessListView" runat="server">
                    <GroupTemplate>
                        <div id="itemPlaceholder" runat="server" />
                    </GroupTemplate>
                    <LayoutTemplate>
                        <div id="groupPlaceholder" runat="server">
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <li>
                            <h2>
                                <div style="height: 21px; padding: 3px;  word-wrap: break-word; word-break: break-all;" >
                                    <a id="LatestRatingBusiness" href='<%#ResolveClientUrl("~/YellowPages/BusinessInstancePage.aspx?Menu=menu_cat_3594&bid=")+ Eval("BusinessID") %>'
                                        title="<%#Eval("BusinessName") %>" class="CategoryAndSubCategory">
                                        <%#Eval("BusinessName")%></a>
                                </div>
                            </h2>
                        </li>
                    </ItemTemplate>
                </asp:ListView>
       </ul>

我的代码背后是这样的:

  DataTable dt =  objYPReviewRatingDataAccess.GetLatestRatingOrderByOperationDate();
            LatestRatingBusinessListView.DataSource = dt;
            LatestRatingBusinessListView.DataBind();

在dt我有像这样的数据

 BusinessID                  BusinessName
  000000001                  GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG
  000000002                  abcd
  000000003                  HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

我试图像这样显示BusinessName

  GGGGGGGGGGGGGGGGGG...
  abcd
  HHHHHHHHHHHHHHHHHH...

我不知道这样做我不想拒绝任何角色,而只是想在溢出时最后用点显示内容。 我怎样才能做到这一点。你的帮助对我意义重大。

谢谢

关注。

1 个答案:

答案 0 :(得分:2)

如果我理解你在问什么,你可以将CSS属性text-overflow: ellipsis添加到你正在谈论的对象中,这将在它被切断之前将“...”添加到溢出的文本行。

说你有一个范围:

<span class="testspan">Here's some text. Once the line becomes long enough, it will be cut off.</span>

使用这个CSS:

.testspan {
     text-decoration: none; 
    text-overflow: ellipsis; 
    display: block; 
    overflow: hidden; 
    white-space: nowrap;
    width: 100px; 
    height: 20px;
}

你明白了:

Here's some t...

请在此处查看jsfiddle:http://jsfiddle.net/8a9gB/