网格视图列不会自动换行

Question

我制作了一个网格视图，我需要准确的列宽比。这是我的代码：

<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

您可能在 CSS 的其他地方指定了 white-space: nowrap。尝试将：white-space: normal 添加到您的 fixedWidth CSS 类。如果这不起作用，请打开 Chrome 右键单击​​表格单元格，然后说“检查元素”。这将打开 Chrome 开发工具，并且会有一个“样式”选项卡，它将向您展示样式是如何应用的。您还可以在 Chrome 开发工具中动态更改样式的值并检查结果。