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.
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.
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.
You need to add the CSS3 property word-wrap: break-word;
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With