2014
05.23

How to Force Html Column to Wrap

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.

Long Text example: Lorem_ipsum_dolor_sit_amet,_consectetur_adipisicing_elit,_sed_do_eiusmod_tempor.Short Text

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.

Long Text example: Lorem_ipsum_dolor_sit_amet,_consectetur_adipisicing_elit,_sed_do_eiusmod_tempor.Short Text

I hope it helps, cheers!

GD Star Rating
loading...
How to Force Html Column to Wrap, 3.0 out of 5 based on 1 rating

Incoming Search Term

Advertise Here

No Comment

Add Your Comment