browse by category or date

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

About Hardono

Hi, I'm Hardono. I am working as a Software Developer. I am working mostly in Windows, dealing with .NET, conversing in C#. But I know a bit of Linux, mainly because I need to keep this blog operational. I've been working in Logistics/Transport industry for more than 9 years.

No Comment

Add Your Comment