I'm trying to find a solution for wrapping words that are extremely long within a shoutbox. For example, if someone writes out a filepath or if someone just writes a bunch of nonsense. For example:
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahnonsensenonsensenonsensenonsense
The Shoutbox can have multiple widths (depending on where it's located), so setting a width for the outer tag would not be appropriate, since the content needs to expand to fill up the width on the page. Now inside this outer tag, there are inner tags that hold each shout within it.
Now, I've done some homework on this and it's been said that this will work:
.yourclass(#youid)
{
word-wrap: break-word; /* Internet Explorer 5.5+ */
white-space: normal; /* Firefox */
}
But I need this to work in all 5 Major Browsers: Firefox, Internet Explorer 7 and 8, Opera, Chrome, and Safari. Is there a solution for all 5 Major Browsers?
Note: I don't mind combining CSS, JS, PHP, and/or any other language to get this to work right.
Has anyone experienced this issue? Has anyone ever resolved it? I look at php's function wordwrap, but this doesn't help me, since it wants a number of characters. Might help if I could define a width in pixels and if the word exceeds this width, to wrap the next character onto the next line down. The problem with using characters for a word wrap is that these characters can have different font sizes, and it will NOT be consistent and will NOT help at all. Perhaps there is a way to determine the width of each character? And if this width exceeds the width of the Shoutbox, than wrap it down to the next line? That might actually work, but I'm at a loss for how to determine this.
Can someone please help me? Thanks :)
Here is the link where I am using the above CSS => http://acs.graphicsmayhem.com/spoogs/index.php
It actually does wrap the very long word in Opera in all 3 of the shouts in Opera, can someone please test in other browsers and give me some feedback on this?
