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­");
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?
Articles
Ten Steps to Optimize SharePoint
Performance
Webcasts
Secrets of SharePoint Part 5: Configuring Microsoft
Office SharePoint Server 2007 for Optimal Performance
Creating End User SharePoint Solutions for Performance
and Scalability
SharePoint 2010 Performance Enhancements for
Administrators
Microsoft SharePoint Server 2010 for the ASP.NET
Developer
Following Best Practices and Avoiding Common Errors with
Microsoft Office SharePoint Server 2007 Development
SharePoint Performance and Capacity Planning
Essentials
Troubleshooting Common Performance Problems in SharePoint
2010
Videos
Channel 9 Interview with Eric Shupps
SharePoint TechTalk - Different Views on Social Computing
SharePoint Post-Deployment Planning and
Management
Podcasts
SharePoint Pod Show - Design for Performance
SharePoint Pod Show - Test Driven Development
Run As Radio - Eric Shupps Improves SharePoint
Performance
