jQuery DataTables: Avoid linebreaks in cells

Question

I don't have a CSS problem, but a logical problem. I want to get rid of automatic linebreaks in my table cells. For some reason, long pieces of data are split in two lines, even in the HTML itself. This means that none of the classic CSS attributes are going to help here.

Example:

<td class="sorting_1">SAP-IT Projekt
 Welle 1</td>

The value inside of the td element is cut in two.

What I've tried:

            {
                "data": "Project.Name",
                "editField": "ProjectEntry.IdProject",
                "render": function (project) {
                    // This code doesn't really work, the cells still contain linebreaks.
                    project = project.trim().replace(/(\r\n\t|\n|\r\t)/gm, "");
                    console.log(project);
                    return project;
                }
            }

Note: The logging in this render function outputs the string without linebreaks.

I think I'm missing a crucial piece of configuration that prevents these automatic linebreaks.

The table used to have the "responsive" piece of configuration, but I've removed that.

---

Update:

Here's the style of each cell:

#ProjectEntryDataContainer, #ProjectEntryDataContainer > div > table > tbody > tr > td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    table-layout: fixed;
}

This style is being applied to each cell, according to Chrome's DevTools. The table element hast the class nowrap .

As I've mentioned, the CSS has little to nothing to do with my issue. The text is being displayed in one line, but the HTML element has a line break in it. I want to get rid of the line break in my HTML so I can search the cells properly, using jQuery code. I'm currently using the following code to search my cells:

var project = rowData.Project.Name.trim().replace(/(\r\n\t|\n|\r\t)/gm, "");

// Find our required cell that we want to edit. If we can't find one, create a new one.
    var colHeaderTarget = $("#ProjectEntryData").find('th:contains("Arbeitsstunden")')[0];
    var rowHeaderTarget = $("#ProjectEntryData").find('td:contains("' + project + '")')[0];

    var projectRows = $("#ProjectEntryData").find("tr:contains('" + project + "')");
    console.log(project);
    console.log(projectRows);

This code works wonderfully as long as the cell doesn't have linebreaks.

---

I just found out that my JSON data contains linebreaks. I'll update once I find out more.

{IdProject: 35, Name: "SAP-IT Projekt
↵ Welle 1", Description: null,

Update: The SQL data contained linebreaks... See answer.

Answer 1

Turns out that when your database contains line breaks you're going to get line breaks in the HTML. If anyone has a solution that causes DataTables to filter out line breaks in the cell data, I'll mark that one as the accepted answer. Otherwise, I'll just advise everyone to avoid linebreaks in your SQL data.

Answer 2

try   it worked for me very well.