18

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.

11
  • 2
    Apparently, the answer is yes. SO seems to simply wrap them in a code block.
    – tvanfosson
    Sep 5, 2011 at 13:58
  • You mean beside javascript manipulations that would insert an abbreviated version of the URL ? Do you consider the option to use an external URL shortener service, too ?
    – PypeBros
    Sep 5, 2011 at 13:59
  • One possibility would be to replace '&' with ' &' - then it would wrap as it reaches the allocated width. Unfortunately, if somebody wants to copy it and paste into a browser, they would have to remove the spaces manually.
    – Aleks G
    Sep 5, 2011 at 14:01
  • @Mimisbrunnr put them between like this? <a href="#">huge url</a>
    – Tsundoku
    Sep 5, 2011 at 14:01
  • @AleksG that shouldn't happen as they only need to see the complete url (as far as I know), but the URL's are added automatically using php, where should I go about doing this?
    – Tsundoku
    Sep 5, 2011 at 14:02

6 Answers 6

27

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;}
2
  • 3
    word-wrap:break-word; didn't work for me (on Chrome). I think this should be elevated as the answer. Thank you. Sep 18, 2018 at 20:38
  • 3
    Thank you! Wasn't working on Chrome and it was killing me! This should be the accepted answer. Sep 26, 2018 at 2:14
16

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.

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

3

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

1
  • I confirm. This is the correct answer as of today @Tsundoku
    – jblew
    Feb 25 at 17:16
2

I use this rule to affect only anchors.

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.