Menu
<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td> How do I get text like this to wrap in CSS?
955
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.
Enter . left { float: left; padding: 0 20px 20px 0;} to the stylesheet to use the CSS "float" property. (Use right to align the image to the right.) If you view your page in a browser, you'll see the image is aligned to the left side of the page and the text wraps around it.
If you type "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" this will produce:
AARRRRRRRRRRRRRRRRRRRR RRGGGGGGGGGGGGGGGGGGGG G I have taken my example from a couple different websites on google. I have tested this on ff 5.0, IE 8.0, and Chrome 10. It works on all of them.
.wrapword { white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ word-break: break-all; white-space: normal; } <table style="table-layout:fixed; width:400px"> <tr> <td class="wrapword"></td> </tr> </table> Try doing this. Works for IE8, FF3.6, Chrome
<body> <table> <tr> <td> <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div> </td> </tr> </table> </body> 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
