ASP.NET Datagridview自动换行的小例子

ASP.NET Datagridview自动换行是一个比较常见并且非常有用的功能，它能够在数据较多时，将数据自动进行换行，从而使得表格更易读。下面是一个完整的攻略，包含了基本步骤和两个实例说明：

基本步骤

以下是实现ASP.NET Datagridview自动换行的基本步骤：

Step 1 转换字段类型

为了让Datagridview进行自动换行，首先需要将需要自动换行的列或字段的类型转换为“TemplateField”，这可以通过以下方法实现：

<asp:GridView ID="GridView1" runat="server">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label1" runat="server" Text="Your Header Text Here" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Your Text Here") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

Step 2 设置容器宽度

在GridView控件中设置ItemStyle属性的宽度，以容纳所有具有大量文本的列和字段。这可以通过以下代码实现：

<asp:GridView ID="GridView1" runat="server">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label1" runat="server" Text="Your Header Text Here" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Your Text Here") %>'></asp:Label>
      </ItemTemplate>
      <ItemStyle Width="200px" />
    </asp:TemplateField>
  </Columns>
</asp:GridView>

这里，样式的宽度设置为200px，你可以根据你的具体需求进行调整。

Step 3 设置CSS样式

使用CSS样式，将Datagridview中的单元格文本溢出隐藏，然后添加文本行内样式“word-wrap:break-word;”，使文本自动换行：

.gridview td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gridview td span {
    word-wrap: break-word;
}

Step 4 创建一个CSS类

最后，将样式应用到GridView中的CSS类或ID，这可以通过以下代码实现：

<asp:GridView ID="GridView1" runat="server" CssClass="gridview">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label1" runat="server" Text="Your Header Text Here" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:Label ID="Label2" runat="server" Text='<%# Eval("Your Text Here") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>   
</asp:GridView>

现在，当你运行你的网站时，GridView中的所有长文本都将自动进行换行。

示例说明

示例1

以下是一个简单的ASP.NET Datagridview自动换行的示例：

<asp:GridView ID="GridView1" runat="server" CssClass="gridview">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label1" runat="server" Text="Name" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label2" runat="server" Text="Address" />
      </HeaderTemplate>
      <ItemTemplate>
        <asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

示例2

以下是另外一个示例，展示了如何将Datagridview单元格中的文本限制为指定的字符数，但在限制后继续进行自动换行：

<asp:GridView ID="GridView1" runat="server" CssClass="gridview">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:Label ID="Label1" runat="server" Text="Name" />
      </HeaderTemplate>
      <ItemTemplate>
        <div style="overflow:hidden;width:100px;">
          <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %> ' /><br />
        </div>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

注意，这里我们使用了一个div容器，并将其宽度设置为100px，这样就限制了文本的长度。同时，我们在文本后面加入了一个br标签，以实现自动换行。