Today I learned something simple. I apparently didn’t know how to make force a column in a table to wrap its text content. Naturally, a column will wrap if the text contains space. But what happen if the text is simply too long, and you don’t want to manually insert hyphens?

Below is the example of a table with a column that didn’t wrap because it contains a very long word.

Source:

<table style="width:400px;">
<tr>
<td style="width:200px;">Long Text example: Lorem_ipsum_dolor_sit_amet,_consectetur_adipisicing_elit,_sed_do_eiusmod_tempor.</td>
<td style="width:200px;">Short Text</td>
</table>

After googling it, apparently this problem can be solved with CSS. Here’s how to do it.

<style type="text/css">
table.tableWrap
{
  table-layout:fixed;
}
.tableWrap td
{
   white-space:normal;
   word-wrap:break-word;
}
</style>
<table style="width:400px;" class="tableWrap">
<tr>
<td style="width:200px;">Long Text example: Lorem_ipsum_dolor_sit_amet,_consectetur_adipisicing_elit,_sed_do_eiusmod_tempor.</td>
<td style="width:200px;">Short Text</td>
</table>

Below is the result.

I hope it helps, cheers!

Incoming Search

css, html