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 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.

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;}

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.

-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+.

I use this rule to affect only anchors.

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

overflow-wrap to the rescue:

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

it has pretty much full browser support and will help when your long word (E.G URLs) cannot fit in the available space

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

try below CSS properties for show long text URL to short...

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 40%;