使用Word Wrap修复Gridview的宽度列

时间:2011-03-23 22:02:49

标签: .net asp.net html css gridview

我一直在寻找这个问题的答案,并没有找到我想要的东西。我有一个包含5列的GridView。其中一列是一个非常长的字符串而不是“”。我需要能够修复列的宽度,并使用自动换行处理字符串直到它结束。我已经尝试了gridview上的所有属性来获得我需要的东西但是跨度总是水平伸展而且从不包装。这是我的gridView代码

            <asp:GridView ID="resultsGrid" AutoGenerateColumns="False" runat="server" AllowPaging="True"
            AllowSorting="True" PageSize="20" OnPageIndexChanging="gridView_PageIndexChanging"
            OnSorting="gridView_Sorting" PagerSettings-Position="TopAndBottom" PagerStyle-HorizontalAlign="Center">
            <PagerSettings Position="TopAndBottom" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <%# Container.DataItemIndex + 1 + "." %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField Visible="false" SortExpression="record_id">
                    <ItemTemplate>
                        <asp:Label ID="lblRecordID" runat="server" Text='<%# Bind("RecordID") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Note Type" SortExpression="business_content_type_cd">
                    <ItemTemplate>
                        <asp:Label ID="lblNoteType" runat="server" Text='<%# Bind("NoteType") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Author" SortExpression="author_user_name">
                    <ItemTemplate>
                        <asp:Label ID="lblAuthor" runat="server" Text='<%# Bind("Author") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Date" SortExpression="content_dttm">
                    <ItemTemplate>
                        <asp:Label ID="lblDate" runat="server" Text='<%# Bind("Date") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label Width="100px" ID="lblData" runat="server" Text='<%# Bind("NoteContent") %>'></asp:Label>
                        <asp:HyperLink ID="linkMore" runat="server" />
                    </ItemTemplate>
                    <FooterStyle Wrap="true" Width="100px" />
                    <HeaderStyle Wrap="true" Width="100px" />
                    <ItemStyle Wrap="true" Width="100px" />
                </asp:TemplateField>
                <asp:TemplateField SortExpression="size" Visible="false">
                    <ItemTemplate>
                        <asp:Label ID="lblSize" runat="server" Text='<%# Bind("Size") %>' Visible="false"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerStyle HorizontalAlign="Center" />
        </asp:GridView>

我不喜欢我必须做的事,但客户想要客户想要的东西(我需要模仿大型机屏幕的用户界面)。谢谢你的帮助

7 个答案:

答案 0 :(得分:2)

已将white-space: normal;用于字符串,它们之间有空格
 word-break: break-all用于表示已联接的String。

,并在文档就绪的表布局上为网格添加CSS样式:固定为网格样式对我有用

 <asp:TemplateField HeaderText="Action">
    <ItemStyle Wrap="true"/>
    <ItemTemplate>
    <div style="white-space: normal; word-break: break-all;">
    <asp:Label ID="lblLogStatus" runat="server" Text='<%# Eval("LogMsg")%>' Style="white-space: normal !important;  word-break: break-all !important;"></asp:Label>
    </div>                                                                                    </ItemTemplate>
    </asp:TemplateField>

答案 1 :(得分:1)

试试这个

         <asp:TemplateField>
                <ItemTemplate>
                     <asp:Label ID="lblData" runat="server" 
                            Text='<%# Bind("NoteContent") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle Width="200px" />
            </asp:TemplateField>

答案 2 :(得分:1)

当文本太长(文本中没有空格)时,Wordwrap有问题,我的解决方案是使用css:隐藏文本,如果它太长

这是示例代码

               <Columns>
                    <asp:TemplateField HeaderText="Parameter path">
                        <ItemTemplate>
                            <div class="paraGraphtext">
                                <asp:Label ID="lblId" runat="server" Text='<%# Eval("tableField") %>'></asp:Label>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>

和css

.paraGraphtext
        {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width:150px;
        }

答案 3 :(得分:0)

我最后用宽幅打破了文字标签......不是我想做的,但找不到答案

答案 4 :(得分:0)

我确信这仍在讨论中,但在ItemDataBound事件中添加“word-wrap”,“break-word”可能会有效。

答案 5 :(得分:0)

            <Columns>
                <asp:TemplateField HeaderText="Parameter path">
                    <ItemTemplate>
                        <div style="white-space:normal;">
                            <asp:Label ID="lblId" runat="server" Text='<%# Eval("tableField") %>'></asp:Label>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

答案 6 :(得分:0)

设置style =&#34; table-layout:fixed&#34;和宽度=&#34; 1000px&#34;在gridview字段中.. 这对我有用。

代码如下:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" style="table-layout: fixed" Width="900px" onprerender="GridView1_PreRender">

如果要删除默认的网格视图设置,请添加GridView1_PreRender事件: 风格=&#34;边界崩溃:崩溃&#34;

GridView1_PreRender事件的代码如下:

protected void GridView1_PreRender(object sender, EventArgs e)
{
    GridView1.CellSpacing = -1;
    GridView1.Style["border-collapse"] = "seperate";
}

如果您有任何疑问,请回复。