How to Prevent Line-Break in a Column of a Table Cell (Not a Single Cell)

table { width:100px; border:1px solid black; }th, td { word-break:keep-all; border:1px solid black; }

<table  id="escalation" class="table table-striped table-bordered" cellspacing="0">

                <thead>                    <tr>                        <th style="display:none">ID</th>                        <th>RID</th>                        <th>Asset Name</th>                        </tr>                </thead>                <tbody>
                        <tr>                            <td>1</td>                            <td class="td-limit">102345</td>                            <td class="td-limit">Application Testing Break</td>                         </tr>
                </tbody>            </table>

How to prevent text in a table cell from wrapping

Have a look at the white-space property, used like this:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

From linked page, here are the various options for white-space:

normal

This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.

pre

This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.

nowrap

This value collapses white space as for 'normal', but suppresses line breaks within text.

pre-wrap

This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

pre-line

This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.

How to have line-breaks in a table cell only after a maximum width in CSS

Short Answer

What you want is not possible. You cannot keep the current HTML, add a max width to a table cell, keep table cells at their minimum widths and have words break without using JavaScript.

There are however some good alternatives that apply to most of your requirements.

Option 1 - overflow within a cell.

By applying white-space: nowrap and overflow-y you can use max-width. The down side is that you have to scroll in the cell.

td {
   white-space:nowrap;
   border: 1px solid black;
   max-width: 350px;
   overflow-y:hidden;
}

<table>
<tr>
<td>This is a long text</td>
<td>short</td>
<td>LongerWord</td>
<td>Normal</td>
<td>This is a long text</td>
<td>Sometimes very long text could appear that should break so the table does not get way too wide</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
<tr>
<td>short</td>
<td>short</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>This is a long text</td>
<td>LongerWord</td>
<td>LongerWord</td>
<td>Normal</td>
</tr>
</table>

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}