Breaking line in <td>

Question

So, I'm displaying a table from my database to my view.

@model IEnumerable<test1.Models.Malfunction>

@{ 

ViewBag.Title = "Malfunctions";

}



<h2>Malfunctions</h2>



<table id="customers" class="table table-bordered table-hover">

<thead>

    <tr>

        <th>ID</th>

        <th>Description</th>

        <th>Date Reported</th>

        <th>Customer</th>

        <th>Movie</th>

    </tr>

</thead>

<tbody>

    @foreach (var malfunction in Model)

    {

        <tr>

            <td>@malfunction.Id</td>

            <td>@malfunction.ReportDescription</td>

            <td>@malfunction.DateReported</td>

            <td>@malfunction.Customer</td>

            <td>@malfunction.Movie</td>

        </tr>

    }

</tbody>

</table>

This property:

<td>@malfunction.ReportDescription</td>

can contain a big amount of text which if too long will overlap the next property in line which is:

<td>@malfunction.DateReported</td>

What I want to do is break the line after the width of the cell is reached so it doesn't overlap with the text in DateReported.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Add:

td {
  word-break: break-all;
}

Fiddle

Breaking line in <td>

Sign up