IlirAs IlirAs - 1 year ago 90
HTML Question

Breaking line in <td>

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.

Answer Source

Add:

td {
  word-break: break-all;
}

Fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download