I searched for quite some time to find a cross-browser word-wrap solution to keep long URL's and code text from pushing my tables out of proportion. I finally found this at last-child.com and it works great in IE7 and Firefox. Change the width and border to suit your needs.
Copy this Code into your stylesheet:
div.IEwrap {
border: 1px solid red;
margin: 10px;
width: 150px;
overflow: hidden;
}
#break {
word-break: break-all;
}
|
Copy this code in your body where you want to word-wrap:
<div class="IEwrap">PutYourLongWordsHereThatYouWantToWrap</div>
|
The result will look like this:
PutYourLongWordsHereThatYouWantToWrap
Although it looks like it cuts off characters, if you were to copy the text from the red box above and paste it elsewhere, like in Notepad, for instance,
you would see all the content show up. So, it did not remove any content, it only made some of it invisible. Cool, huh?
|