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://this.verylongurl.net/some_content_here/and_link_text_here/index.html, it’s good. So is this http://www.anynormalurl.info/2008/02/22/blogging_url_today.php.
And like this with overflow: hidden;:
Take a look at http://this.verylongurl.net/some_content_here/and_link_text_here/index.html, it’s good. So is this http://www.anynormalurl.info/2008/02/22/blogging_url_today.php.
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://this.verylongurl.net/ some_content_here/ and_link_text_here/ index.html, it’s good. So is this http://www.anynormalurl.info/ 2008/02/22/ blogging_url_today.php.
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://this.verylongurl.net/some_content_here/and_link_text_here/index.html, it’s good. So is this http://www.anynormalurl.info/2008/02/22/blogging_url_today.php.
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
//
// 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
