In 301tool 1.1.1, I fixed an issue of the list page’s layout breaking if friendly URLs were too long. This fix unfortunately led to an unintended (unexpected?) effect in Opera:
Since then, I’ve been keeping an eye out for good cross-browser solutions for the issue of breaking up a long string gracefully.
The General Solutions
The first general solution is to use a word break tag <wbr>, which tells the browser “you can break the string here if you want to” (and essentially treats it as a <br> as needed). The second solution is to use the unicode zero width space character, notated as ​ or ​ in HTML.
The General Solution Caveats & Background
Using the zero width space character would be ideal in many cases, but for the fact that some browsers render the character as an ugly empty box character. IE 5.5 (no biggie) and Opera 10+ (but not older versions) seem to be affected.
There are a few interesting things about the <wbr> tag. First, it is not supported in the XHTML 1.0 Strict specification (I usually code under this spec), so it will throw validation errors. It is also strangely absent from the HTML 4.01 specification. In fact, the only specification it exists under is the current HTML5 draft specification, so it looks like it took well over 15 years to get official W3C recognition.
From all appearances, it looks like <wbr> was a non-standard tag put into use by the Netscape browser (in version 1.1). While there is limited and contradictory information about browser support for <wbr>, it appears that full support was available until Netscape 4.0. From version 4.0 to 4.5, only partial support for it existed. Full support was reintroduced in version 4.8, and full support was dropped once again in version 6.0 onward, where it remained partially supported until Netscape was discontinued in 2008. Partial support meant that it could be used by itself, but would not work within the non-standard <nobr></nobr> tags (mostly because the of the availability of the <br> tag and it being recognized in the W3C HTML standard). Partial support also meant that tag attributes of <wbr> fell in and out of favor between browser versions.
In order to remain competitive with Netscape, and later to maintain backwards compatibility after Netscape fell by the wayside, Microsoft included support for <wbr> in IE 2 – 7, but suddenly dropped it in IE8 standards mode, where it is consequently ignored. IE8 quirks mode (yuck) will still treat it as expected (but you then would have to deal with all the other garbage that comes with quirks mode).
<wbr> doesn’t appear to be supported by Opera at all, which is surprising considering every other browser appears to support it, or supported it at one time. On the other hand, it’s understandable considering Opera has been a strong advocate for W3C standards.
Suggested Solutions Around the Web
Quirksmode offers some dated information, and the solution suggestion doesn’t work in Opera 10+ because of the way the zero width space character is rendered.
StackOverflow had a number of questions asked about the topic, but no solid solutions. The closest to a solution can be found here, but it’s dated, “hacky”, and unnecessarily complex.
346berastreet had a few interesting comments about word breaks/wrapping within tables.
An independent site has a long, in-depth explanation on word breaks and other topics relating to HTML word division. An interesting read, but doesn’t list any solutions beyond what’s already been suggested.
The Modern Browser Solution
If all you care about is IE and/or only current browsers, the CSS word-wrap property solution works perfectly well:
word-wrap: break-word;
This will break a string when it reaches the limit of a container. The drawback is just that–it will break it wherever. The benifit of <wbr> or the zero width space character is that you can give a suggestion as to where you would prefer the string to be broken and wrapped to the next line.
Strangely enough, the word-wrap property started as an IE5.5 CSS property, and was later adopted into the CSS3 specification. Surprisingly, it wasn’t adopted by any other major browsers until relatively recently (for example, it didn’t appear in Firefox until the Firefox 3.1 beta, which was later pushed out as Firefox 3.5).
The Proposed Backwards Compatible Solution
For non-IE browsers going back a version or two, the word-wrap property probably won’t be recognized. So, in order to use word breaks in both new and old browsers, I ended up with this solution (the two key lines are highlighted):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Word Break Test by AJD Productions</title>
<style type="text/css">
div { word-wrap:break-word;}
wbr { display: inline-block; } /* fix for IE8 and Opera */
</style>
</head>
<body>
<div style="width:100px; border: 1px solid black;">the<wbr />best<wbr />page<wbr />in<wbr />the<wbr />WORDWRAPwithWBRwithfix</div>
</body>
</html>
Note that the HTML will not validate (unless using HTML5), so if you’re a stickler for valid markup like I am, you may either have to jump on HTML5 bandwagon or grit your teeth and bear with using it under the established (X)HTML specifications.
But, as far as I can tell, the combined solution works in both older and newer browsers.
Screenshots
Here’s the test page I used for testing, and the accompanying screenshots–the majority of which are from browsershots.org. Here’s a quick breakdown of what the test entailed:
- Nothing applied. Just a string of text in a <div> set to a width of 100px
- <wbr> tag used to break up the string of text.
- <wbr> tag used with the proposed fix applied.
- Zero width space character used to break up the string of text.
- The CSS word-wrap property used.
- <wbr> tag used, plus the word-wrap property, plus the proposed fix.
Note that the strings don’t have break suggestions throughout the entire string. This is to show what happens to the overflow in combination with the break suggestions.
Bonus Material
As a bonus, here’s PHP function I use for injecting character breaks for when I’m expecting long, unbroken strings:
/**
* inserts a char/string at every nth character within a string
* @param string $inputStr the string to parse
* @param string $insert the char/string to insert
* @param int $nth after how many characters to perform the insertion
* @return string
*/
function insertNthChar($inputStr,$insert,$nth) {
$output = '';
for($i=0; $i<strlen($inputStr); $i++) {
if (($i>0) && ($i%$nth==0)){
$output.= $insert;
}
$output.=$inputStr{$i};
}
return $output;
}
