Solving the Word Wrap Problem in Firefox with Javascript

I know it's all the rage among web developers to blame IE for everything that's wrong on the Internet but sometimes - just sometimes - the folks in Redmond get it right and the fine volunteers of the Mozillaverse get it wrong.  Perhaps there's no better example of this than word breaking in columns.  For years, IE has had the ever-so-useful CSS property "word-wrap" which, when supplied with a value like "break-word", will split up a long string of text and preserve the precious layout you've slaved for hours to create.  It's so handy, in fact, that it actually made it into the CSS3 spec (don't be a hater - even the standards busybodies know a good thing when they see it).

Unfortunately, Firefox doesn't recognize this property.  Yes, I know it's supposed to in version 3.5+ but I have yet to see it actually working.  I've spent the better part of the last 9 months doing JavaScript programming for SharePoint 2013 apps so I've spent way too much time testing browser compatibility and not once have I seen FF honor this property.  Perhaps there's some secret Little Orphan Annie Decoder Ring trick to make it work - if so, please share it with me but until then we'll have to continue  hacking our way around this ridiculous exclusion in an otherwise fine browser.

A lot of people suggest doing this in CSS like so:

.wrap {
white-space: pre-wrap;       /* CSS3 */
white-space: -moz-pre-wrap;  /* Mozilla */
}

But I've found that solution is spotty - it sometimes works and sometimes doesn't (mostly the latter).  Instead, I prefer to use JavaScript to solve this problem, which eliminates the need for browser-dependent CSS tricks.  Taking, for example, a string that has 20 characters and must fit into a column that only permits 10 characters, the solution would look something like this:

var newstring = oldstring.replace(/([^\s\t\r\n<>]{11})/g, "$1<wbr>");

Or, if you would prefer a hyphen instead of a soft line break:

var newstring = oldstring.replace(/([^\s\t\r\n<>]{11})/g, "$1&shy;");  

Inline replacement is fine but if you end up doing it repeatedly within an application all those Regular Expressions get pretty redundant.  Plus, it would be nice to be able to specify the length as a parameter for a reusable function.  A quick bit of additional code will get us there:

function breakWord(string, length) {
    var reg = new RegExp("([^\s\t\r\n<>]{" + length + "})", "g");
    var s = string.replace(reg, "$1<wbr>");
    return s;
}

We can now call that function on any string we like:

var newstring = breakWord(oldstring,10);

Ah, that's better.  Word breaking for any string in IE and Firefox.  Now, Microsoft, let's talk about all those web pages that don't work in IE10, shall we?  Like, I dunno, just as a random example, SharePoint 2010 dialogs.  How 'bout it?