網格視圖列將不會自動換行

Question

我做了一個gridview，我需要精確的列寬比率。 這是我的代碼：

<asp:GridView runat="server" ID="table" DataSourceID="Data" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="LightGray" ShowHeader="false" 
                            DataKeyNames="ID" Width="100%" style="table-layout: fixed;" >

                            <Columns>

                                <asp:BoundField DataField="date" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="beltStatus" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBelts" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="returnDate" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="prepaidAmount" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="checkNumber" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"/>
                                <asp:BoundField DataField="notes" ItemStyle-Width="10%" ItemStyle-CssClass="fixedWidth" />
                                <asp:BoundField DataField="numberOfModsFiveStar" ItemStyle-Width="5%"  ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfModsCanada" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBuckles" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBags" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="customerName" ItemStyle-Width="10%" ItemStyle-CssClass="fixedWidth" />
                                <asp:BoundField DataField="state" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"  />
                                <asp:BoundField DataField="email" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"  />

                                <asp:TemplateField ItemStyle-Width="5%">
                                    <ItemTemplate>
                                        <asp:HyperLink runat="server" NavigateUrl='<%# ConfigurationManager.AppSettings["historyLog"] + "?table=mos&id=" + Eval("ID") %>' 
                                            Text='<%# Eval("lastChangedByUser") + " - " + Eval("lastChangeTime") %>' ></asp:HyperLink>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>

固定寬度CSS：

.fixedWidth
{
word-wrap: break-word;
word-break: break-all;
}

客戶名稱幾乎總是比列寬長。 我希望文本下降到下一行。 而是這樣做：

有人可以幫忙嗎？

Answer 1

您可能會有white-space: nowrap CSS中的white-space: nowrap指定在其他位置。 嘗試添加： white-space: normal於fixedWidth CSS類。 如果這不起作用，請打開Chrome，右鍵單擊表格單元格，然后說“檢查元素”。 這將打開Chrome開發者工具，並且會出現一個“樣式”標簽，向您展示如何應用樣式。 您還可以在Chrome開發工具中動態更改樣式的值，然后檢查結果。