jquery - 创建.....当div发生溢出时

Question

我正在使用 asp.net。我正在尝试将数据插入 ListView 。我的代码示例如下:

     <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...

我不知道这样做我不想拒绝任何字符，而我只想在溢出时在最后显示带点的内容。我怎样才能做到这一点。您的帮助对我来说意义重大。

谢谢

敬而远之。

Answer 1

如果我明白你在问什么，你可以将 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/