Geek Answers Handbook

Crash huge URLs so that they don't overflow

Is there a way to make huge URL-addresses, 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 rendering on a website? I would rather shorten it, but where I work, they asked me to show the entire URL, but I only have 320 pixels to show it, and it overflows.

Overflow: hidden, is also not an option, and adding style to the td that contains the URL is simply ignored.

+4
source share
3 answers

CSS3 has a new feature:

 word-wrap:break-word;

Here you can see a live example (you must have a browser compatible with this new feature).

This is also the same method that StackOverflow uses if you examine your long URL that you notice.

Alternatively, you can try Hyphenator .

+9
source 
 -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;

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

+6
source

I use this rule to affect anchors only.

 .my-paragraph pa[href] { word-wrap:break-word; }
0
source

More articles:


All Articles