How to wrap text in GridView Bound columns in


Usually Gridview columns don’t wrap when the text content in the Gridview columns overflows the allocated width, it will keep expanding which makes the Gridview looks a bit odd.  To resolve this issue we need a custom implementation which will assign word wrap dynamically to Gridview columns. 


In this article I am going to explain how to apply word wrap for GridView’s BoundField columns. To add word wrap in Gridview we can make use of word-break css style property.

You can follow the below steps to assign the css word wrap to your Gridivew.

First add the below css style to your page.

<style type="text/css">
        .WordWrap {
            width: 100%;
            word-break: break-all;

Then add a div as a container control for you Gridivew. We need to assign the css style to this container div

<div class="WordWrap">
     <%--Add your gridview here--%>

That’s it now you have word wrap applied to your Gridview.

Complete sample code

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <style type="text/css">
        .WordWrap {
            width: 100%;
            word-break: break-all;
    <form id="form1" runat="server">
        <div class="WordWrap">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="FirstName"
                ForeColor="#333333" GridLines="Both" Width="50%">
                <AlternatingRowStyle BackColor="White" />
                    <asp:BoundField HeaderText="FirstName" DataField="FirstName">
                        <ItemStyle Width="35" />
                        <HeaderStyle Width="100px" />
                    <asp:BoundField HeaderText="LastName" DataField="LastName">
                        <ItemStyle Width="50" />
                        <HeaderStyle Width="100px" />


protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                //Assign the data to GridView
                GridView6.DataSource = this.Get_LongText();
                //Bind the Grid

        //Populate some dummy data
        public DataTable Get_LongText()

            DataTable dt = new DataTable();
            DataRow dr;
            string Item = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list = Item.Split(',');
            string Item2 = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,Fruit2,Fruit3";
            string[] list2 = Item2.Split(',');
            dt.Columns.Add("FirstName", typeof(string));
            dt.Columns.Add("LastName", typeof(string));
            for (int i = 0; i < list.Length; i++)
                dr = dt.NewRow();
                dr["FirstName"] = list[i];
                dr["LastName"] = list2[i];
            return dt;

Demo Image


, , , ,

  1. #1 by Krishna on April 6, 2017 - 5:48 pm

    it worked perfectly….thanks


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: