What is the best way to ensure that 10,000
characters will fit inside a <td>
without overflowing?
I've experimented with various solutions such as:
word-wrap: break-word
overflow-wrap
white-space: initial
...and several others, but nothing seems to be effective:
.a {
white-space: nowrap;
width: 250px;
word-wrap: break-word;
border: 1px solid #000000;
}
table,
th,
td {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td colspan="5">
SOME STUFF
</td>
<td>
<div>A</div>
<div>A-text</div>
</td>
<td>
<div>B</div>
<div>C-text</div>
</td>
<td>
<div>C</div>
<div>C-text</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="a">
abcedfghijklmnopqrstuvwxyz (repeated 50 times)
</div>
</td>
</tr>
</tbody>
</table>