html trick for wrapping long urls06 Nov 2012
These days, I spend a lot of my time working on mobile development (http://gardenbaysoftware.com).
In mobile development, screen space and layout are huge concerns. One challenge I've seen is how to display a long URL on a mobile device. In most cases you can just create a link and use some text-overflow techniques (text-overflow:elipsis). However if you really want to show the entire text of the URL, but have the invariable word-wrapping occur at the most visually appealing spots (after the forward slash character), it can be tricky. Not all browsers interpret the word-break properties similarly.
I came across a wonderful technique here: http://www.alistapart.com/articles/the-look-that-says-book/
url = url.split('/').join('/​')
Just make sure you only add this to the visible portion of the text, not the actual href attribute.
It works like a charm, breaking text after each / character when needed.
Note: this technique does not work out of the box with a wordpress site, as wordpress mangles/processes the urls when rendering the page, attempting to encode the ampersand character in the url.