Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does my html table 'max-width' not cause text to wrap?

Tags:

html

css

I have an html table and one column (or <td>) contains very long words. I want to set the max-width of the column so that if text is longer than the max-width the text should auto-wrap to next line. I have tried to set the css max-width style on the appropriate <td> element with "max-width:100px", but it does not work. The text is still very long and does not auto-wrap to next line.

Any ideas what is wrong or any solution reference code? I am using IE 8 on Windows 7.

like image 794
George2 Avatar asked Apr 17 '10 15:04

George2


People also ask

How do I force wrap text in HTML?

You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.

How do I wrap text around a table in HTML?

Solution with the CSS word-wrap propertyUse the border-collapse property set to "collapse" and table-layout property set to "fixed" on the <table> element. Also, specify the width of the table. Then, set the word-wrap property to its "break-word" value for <td> elements and add border and width to them.


1 Answers

You need to add the CSS3 property word-wrap: break-word;.

like image 134
BalusC Avatar answered Sep 23 '22 18:09

BalusC