Table overflow issue

Question

I am facing a very basic issue with table is that on overflow on <td> cell the text flows out of the specified width

Issue looks like something following:

+--------------+
| abcdef@hotmai|.com
+--------------+

I want that on overflow text goes to next line. Something like following.

+--------------+
| abcdef@hotmai|
| .com         |
+--------------+

I tried following css but didnot work: max-width:20%; table-layout:fixed;

http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table — Kevin Bowersox, Dec 16 '12 at 14:59

score 4 · Accepted Answer · answered Dec 16 '12 at 14:59

4

Use word-wrap CSS property to wrap your text inside a fixed width td

table td {
   word-wrap: break-word;
}

answered Dec 16 '12 at 14:59

Mr. Alien

I figure out one thing that its necessary to set `width` and `max-width` of the table to make `word-wrap` property work. – soft genic Dec 16 '12 at 15:14
@softgenic you need to add width is because td will resize itself, so if you are using a fixed width for your td's so you need to wrap the text using that property so that your text doesn't overflow – Mr. Alien Dec 16 '12 at 15:15

1 Answers1