Break huge URLs so they don't overflow

Question

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 320px 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 1

CSS3 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 tecnique adopted by StackOverflow, if you examine your long URL you will notice.

Alternatively you can try Hyphenator.

Solution 2

In Chrome, word-wrap does not work. You should use:

word-break: break-all;

If you want to apply it only on a tags, then you should use:

a {word-break: break-all;}

Note that break-all will even split words, so a word can start on one line and end on another, that's why it's a good idea to apply it only on a tags. If you know that your links always contain words (e.g. are not something like mylink/abcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz1234567890abcdefghijklmnopqrstuvwxyz1234567890 ), then you can apply the following at the body tag level (this way a word is not split onto 2 lines):

body {word-break: break-word;}

Solution 3

-ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

Solution 4

I use this rule to affect only anchors.

.my-paragraph p a[href] {
  word-wrap:break-word;
}

View more solutions

Comments

[tvanfosson]

Apparently, the answer is yes. SO seems to simply wrap them in a code block.

[Ismail Kattakath]

word-wrap:break-word; didn't work for me (on Chrome). I think this should be elevated as the answer. Thank you.

[Mark Chapel]

Thank you! Wasn't working on Chrome and it was killing me! This should be the accepted answer.