Menu
http://jsfiddle.net/L2yLe/
The fiddle says it all. I want a css-only solution that limits the width of the table to the width of the div. The long string should be broken (but as you can see it isn't), and that causes the table to overflow.
I don't want to use any pixel widths. This should be completely fluid.
<div> <table> <tr> <td> short string </td> <td> somereallylongstringofdatasomereallylongstringofdatasomereallylongstringofdata </td> <td> short string </td> </tr> </table> </div> div { width: 50%; background-color: darkgray; padding: 15px; margin: 10px auto; } table { border-collapse: collapse; } td { border: 1px solid black; } 
693
There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.
The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow. word-wrap: break-word; It is used to broken the words at arbitrary points to prevent overflow.
To make the columns in a table automatically fit the contents, click on your table. On the Layout tab, in the Cell Size group, click AutoFit, and then click AutoFit Contents.
When the text in a single table cell exceeds a few words, a line break (<BR>) may improve the appearance and readability of the table. The line break code allows data to be split into multiple lines. Place the line break code <BR> within the text at the point(s) you want the line to break.
Guys take a look on http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ -ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; 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
