Apply word wrap in jQuery DataTable Column using jQuery in ASP.Net

Last Reply 11 months ago By dharmendr

Posted 11 months ago

width of one of the column sentence is large and occupying more length.

so here how can i break a sentence to new line in jquery datatable.

Posted 11 months ago

Hi jovceka,

Wrap the column data in a div and set the white-space and width css properties for the div.

Check this example. Now please take its reference and correct your code.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


<html xmlns="">
<head runat="server">
    <script type="text/javascript" src=""></script>
    <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <script  type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(function () {
                url: '<%= Page.ResolveUrl("~/WebService.asmx/GetCustomers")%>',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                        "processing": true,
                        "paging": true,
                        "searching": { "regex": true },
                        "responsive": true,
                        data: data,
                        columns: [
                            { 'data': 'Id', width: "50px" },
                            { 'data': 'Name', width: "100px" },
                            { 'data': 'Notes' },
                        columnDefs: [{
                            render: function (data, type, full, meta) {
                                return "<div id='dvNotes' style='white-space: normal;width: 250px;'>" + data + "</div>";
                            targets: 2
    <form id="form1" runat="server">
    <table id="datatable" class="table table-striped table-bordered dt-responsive">



using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
    public class Customer
        public int Id { get; set; }
        public string Name { get; set; }
        public string Notes { get; set; }

    public void GetCustomers()
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<Customer> customers = new List<Customer>();
        using (SqlConnection con = new SqlConnection(cs))
            SqlCommand cmd = new SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con);
            cmd.CommandType = CommandType.Text;
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
                Customer customer = new Customer();
                customer.Id = Convert.ToInt32(rdr["EmployeeId"]);
                customer.Name = rdr["FirstName"].ToString();
                customer.Notes = rdr["Notes"].ToString();
        JavaScriptSerializer js = new JavaScriptSerializer();



Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
     Inherits System.Web.Services.WebService
    Public Class Customer
        Public Property Id As Integer
        Public Property Name As String
        Public Property Notes As String
    End Class

    Public Sub GetCustomers()
        Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim customers As List(Of Customer) = New List(Of Customer)()
        Using con As SqlConnection = New SqlConnection(cs)
            Dim cmd As SqlCommand = New SqlCommand("SELECT EmployeeId,FirstName,Notes FROM Employees", con)
            cmd.CommandType = CommandType.Text
            Dim rdr As SqlDataReader = cmd.ExecuteReader()
            While rdr.Read()
                Dim customer As Customer = New Customer()
                customer.Id = Convert.ToInt32(rdr("EmployeeId"))
                customer.Name = rdr("FirstName").ToString()
                customer.Notes = rdr("Notes").ToString()
            End While
        End Using

        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
    End Sub
End Class