Long Text Wrapping in ie9/10 inside table td

Both IE 9 and 10 seem to have problem wrapping long text inside table td element, even we explicitly set the the word-wrap CSS property.

Turns out the solution is we also have a set with and table-layout css to the wrapping table.

/* Both of them are Necessary.*/
.long-text-table {  
  table-layout:fixed;
  width:100%;
}
.long-text-wrapper{
  word-wrap:break-word;
}

HTML:

<table class="long-text-table">
 <tr>
  <td>
   <div class="long-text-wrapper"> REALLY LONG TEXT NEED TO WRAP</div>
  </td>
 </tr>
</table>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s