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;

stackoverflow.com/questions/1258416/word-wrap-in-a-html-table — Kevin Bowersox
– Kevin Bowersox, Commented Dec 16, 2012 at 14:59

Mr. Alien · Accepted Answer · 2012-12-16 14:59:13Z

4

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

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

answered Dec 16, 2012 at 14:59

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

soft genic Over a year ago

I figure out one thing that its necessary to set width and max-width of the table to make word-wrap property work.

Mr. Alien Over a year ago

@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

Collectives™ on Stack Overflow

Table overflow issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related