Example for Understanding
Imagine a scenario where you have a basic two-row table with two cells in each row:
<table>
<tr>
<th>Primary</th>
<th>Secondary</th>
</tr>
<tr>
<td>Small font</td>
<td>ExtremelyLongNonHyphenatedTextLineThatShouldWrap</td>
</tr>
</table>
One of the cells contains a lengthy word without spaces or hyphens, making it challenging for it to break.
Below is some CSS code:
table {
border: 1px solid lightgray;
}
table th {
background-color: silver;
text-align: center;
padding: 10px;
}
table td {
width: 200px;
border: 1px dotted silver;
word-break: break-all;
}
The cells are set at a fixed width of 200px. However, due to the extended non-breaking word, two things may occur.
(1) The table could expand the column width to fit the lengthy text.
(2) The text might overflow from a cell based on other factors like having a fixed layout with a specified table width.
By applying word-break: break-all to the table cells, the text will wrap while maintaining the predefined widths of the table columns.
Check out the demo here:
Additional Information
To delve deeper into the CSS3 word-break property, visit: