html trick for wrapping long urls

These days, I spend a lot of my time working on mobile development (

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:

Simply put, it uses a technique of adding a 'non visible space' character (&#8203) after each forward slash in the url. The browser will happily wrap the text on those invisible spaces. This can be done in javascript something like so:

url = url.split('/').join('/&#8203')

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.