urlcssword-wrapline-breaks

Break huge URLs so they don't overflow


Is there a way to force huge URLs, such as http://www.google.de/search?q=65daysofstatic&hl=de&safe=off&prmd=ivnsl&source=lnms&tbm=isch&ei=P9NkToCRMorHsgaunaClCg&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CBkQ_AUoAQ&biw=1697&bih=882, break when rendered in the website?

I'd rather shorten it, but where I'm working they've asked me to show the entire URL, but I only have a space of 320 pixels to show it and it overflows.

Overflow:hidden isn't an option either and adding a style to the td where the URL is contained is simply ignored.


Solution

  • CSS 3 has a new feature:

    word-wrap:break-word;
    

    You can see a live example here (you must have a browser compatible with that new feature).

    It's also the same technique adopted by Stack Overflow. If you examine your long URL, you will notice.

    Alternatively, you can try Hyphenator.