Wrapping long words in a Shoutbox

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+ */
   whit开发者_如何转开发e-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?

word-wrap: break-word; is indeed what you are looking for. Not sure if it works in Opera, but others should all work.

Your choices (as I see it) are:

1. Use a solution that doesn't work for all browsers, or
2. Use CSS overflow:auto or overflow:hidden to preserve the container size while letting the unbroken words flow past the edge, or
3. Break at a character limit (on the server or client) and 'break' the nonsense text, or
4. Do some fast (but visible-to-the-user) breaking and re-breaking of the text at various character limits until you find a situation where scrollWidth <= clientWidth. (This will require repeated setTimeout calls to allow the browser to re-flow after your change, before you can measure the effect.)

I suppose you could also use a rough heuristic based on a known font size and measured width, but that also wouldn't meet what appear to be your criteria for exactness. I'm sorry to say that what you want (as I understand it) is not reasonably possible using the technology at hand.

I suggest you use two method below:

• Truncate(): http://phpcode.mypapit.net/truncate-a-very-long-text-with-php-function/33/

• Ellipsis(): http://brenelz.com/blog/creating-an-ellipsis-in-php/

Otherwise, you can use CSS by set overflow is hidden.

Hope that help