配件长文本在GridView的列 [英] fitting long text in GridView Column

问题描述

我有一个ASP.NET GridView的列显示长文本的问题。我不希望文本换行到第二行，因为它是一个业务需求不换行。

I am having issues displaying long text in a ASP.NET gridview column. I don't want the text to wrap on to the second line as it is one the business requirements not to wrap.

理想我需要某种服务器或客户端基于code的，可以帮助我截断文本列的大小，然后可能显示更多的文字更按钮或'...'？

Ideally I want some sort of server or client based code which can help me truncate the text to the size of the column and then maybe display a more button or '...' for more text?

而当更多的按钮，或者......被点击;一个弹出或者出现与文本或全文的其余部分。

and when the more button or ... are clicked; a pop up appears either with rest of the text or full text.

请注意：文本或字符串大小而变化，它可以是任何长度的25至75个字符

note: the text or string size varies and it can be any of length from 25 to 75 characters.

这是我应该如何去实现上述任何想法？谢谢

any ideas on how should i go about achieving the above? thanks

推荐答案

使用这个CSS类为GridView列

Use this CSS class for the gridview column

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 50px;
    display: block;
    overflow: hidden;
}

它把在各列的末尾在一个特定的宽度。

It puts ... in the end of the column in a specific width.

标记的

Markup

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
        AutoGenerateColumns="False" CssClass="employees-grid">
        <Columns>
            <asp:BoundField DataField="id" HeaderText="ID">
                <ItemStyle CssClass="employees-grid-id" />
            </asp:BoundField>
            <asp:BoundField DataField="first_name" HeaderText="First Name">
                <ItemStyle CssClass="employees-grid-first-name" />
            </asp:BoundField>
            <asp:BoundField DataField="last_name" HeaderText="Last Name">
                <ItemStyle CssClass="employees-grid-last-name" />
            </asp:BoundField>
            <asp:BoundField DataField="email" HeaderText="Email">
                <ItemStyle CssClass="employees-grid-email" />
            </asp:BoundField>
            <asp:BoundField DataField="note" HeaderText="Note">
                <ItemStyle CssClass="employees-grid-note" />
            </asp:BoundField>
        </Columns>
</asp:GridView>

CSS 的

CSS

.employees-grid {
    table-layout: fixed;
    width: 100%;
}
.employees-grid-id {
    width: 5%;   
}
.employees-grid-first-name {
    width: 10%; 
}
.employees-grid-last-name {
    width: 10%;   
}
.employees-grid-email {
    width: 15%; 
}
.employees-grid-note {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

这篇关于配件长文本在GridView的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！