使用自动换行修复 Gridview 的宽度列

Posted 2023-03-05

【中文标题】使用自动换行修复 Gridview 的宽度列

【英文标题】：Fix Width Column of Gridview with Word Wrap

【发布时间】：2011-07-21 16:41:25

【问题描述】：

我一直在寻找这个问题的答案，但没有找到我想要的东西。我有一个 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>

我不喜欢我必须做的事情，但客户想要客户想要的（我需要模仿大型机屏幕的用户界面）。感谢您的帮助

【参考方案1】：

已将white-space: normal; 用于它们之间有空格的字符串word-break: break-all 用于类似连接的字符串。

并在文档准备好的表格布局中为网格添加 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>

【参考方案2】：

在 gridview 字段中设置 style="table-layout:fixed" 和 Width="1000px".. 这对我有用。

代码如下：

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

如果要删除默认的 gridview 设置，请添加 GridView1_PreRender 事件： style="border-collapse:collapse"

GridView1_PreRender 事件代码如下：

protected void GridView1_PreRender(object sender, EventArgs e)

    GridView1.CellSpacing = -1;
    GridView1.Style["border-collapse"] = "seperate";

如果您有任何疑问，请回复..

【参考方案3】：

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

【讨论】：

欢迎来到Stack Overflow。您不仅可以通过包含代码来改进您的答案——最好还提供关于它的作用的解释。有关改进答案的更多提示，请参阅How to Answer。谢谢！

【参考方案4】：

文本太长时自动换行出现问题（文本中没有空格），我的解决方案是使用 css: hidden text if it is too long

这是示例代码

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

【参考方案5】：

我确信这仍在讨论中，但在 ItemDataBound 事件上添加“word-wrap”、“break-word”之类的方法可能会起作用。

【参考方案6】：

我最终用 标签将文本按宽度分开...不是我想做的，但找不到答案

【参考方案7】：

试试这个

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

【讨论】：

我已经在我的代码中这样做了。我做错了什么？