Updated 2008-02-26
Long have I been looking for a way to break long strings of letters over multiple lines in a good way. None of the CSS inline or HTML/CSS <span> examples I have found have been able to automatically apply to long links or file names. I have found this a special pain when dealing with development for Growl due to the narrow width and often found long file names or URL:s often passed as message content.
For example, let us say you have a 300 pixels wide column but have to write a URL or two there. It will look like this with overflow: visible;:
Take a look at http://interaktion.info/interaktion/super_long_url/improved_line_breaks_in_html_without_touching_your_markup, it's good.
And like this with overflow: hidden;:
Or like this where you manually have to split the string into separate <span>:s with added CSS rules to avoid ugly spaces, a method that is also not especially nice to search engines or screen readers:
Take a look at http://interaktion.info/interaktion/ super_long_url/ improved_ line_ breaks_ in_ html_ without_ touching_ your_ markup, it's good.
There has to be a better way
To the rescue comes the <wbr /> tag which is a behavioral and in a sense optional tag for web browsers which essentially says "it's okay to break here if you want", not unlike like a hyphen. Which means some browsers will interpret it slightly different, but as long as we can get a good way to break these long links and filenames we will be happy.
Adding a few such tags to our example will give the desired result:
Take a look at http://interaktion.info/
So, we can now use the split and join code to easy accomplish what we are looking for to add a line break after a slash:
document.getElementsByTagName(changeThisElement)[i].innerHTML = indata[i].innerHTML.split("/").join("/The Complete Code
This goes in the <head> tag of your document:
<script type="text/javascript" charset="utf-8">
<!--
// © Niklas Brunberg 2008 - www.interaktion.info. All rights reserved.
// This software is distributed under the BSD License, you can use it with
// both open and closed source software. For the legal fine print,
// see: http://www.opensource.org/licenses/bsd-license.php
//
// Version 1.1 (2008-02-26)
//
// Using this code:
// 1. Make sure you add a onload="addWBRfunction();" to the <body> tag.
function addWBRfunction()
{
var indata, i, changeThisElement;
// 2. If you want to use this on another kind of element, just replace "p" with e.g. "span" or "dd".
changeThisElement = "p";
indata = document.getElementsByTagName(changeThisElement);
for (i=0; i < indata.length; i++)
{
// Splits after periods (.) after underscores (_) after slashes (/)
// and repairs any problems possibly caused in certain tags ending with "/>"
document.getElementsByTagName(changeThisElement)[i].innerHTML
= indata[i].innerHTML.split("/").join("/<wbr />").split("/<wbr>>").join("/><wbr>").split(".").join(".<wbr />").split("_").join("_<wbr />");
};
}
// 3. There is no step 3.
//-->
As far as I am aware there is only one problem with the <wbr /> tag which is the lack of hyphens in some cases. If you know a way to set a hyphen only when the browser choose to use the <wbr /> tag I will be more than happy to hear from you. This should work in Safari 2, Firefox 2, Opera 9 and Internet Explorer 6 including later versions of these browsers.
