Word wrap a link so it doesn't overflow its pa

Question

This question already has an answer here:

• Is there a way to word-wrap long words in a div? 6 answers

I have this piece of HTML

<div id='permalink_section'>
  <a href="here goes a very long link">here goes a very very long link</a>
</div>

with, for now, this CSS

div#permalink_section { width: 960px }

The link text can be very long and it overflows the div when it's length does exceed the div width. Is there a way to force the link to break and go on the next line when its width exceeds the div width?

Answer 1

I didn't have much luck with the solution in the accepted answer, so I tried a different approach. On load, I pad all slashes in the anchor text with spaces: "/" --> " / ". Most links don't have slashes and so this does nothing, and most links that do have them are hyperlinks, and these look okay with this substitution, and then the links do wrap correctly.

    $('a').each(function ()
    {
        //get the content
        var content = $(this).html();

        //a regex to find all slashes
        var rgx = new RegExp('/', 'g');

        //do the replacement
        content = content.replace(rgx, " / ")

        //the previous step also affects http:// (where present), so fix this back up
        content = content.replace('http: /  / ', 'http://');

        //set the content back into the element
        $(this).html(content);
    });

Answer 2

Works for Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

CSS

.word-wrap {
    /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
    -ms-word-break: break-all;
    word-break: break-all;
    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

Source: kenneth.io

SCSS

@mixin word-wrap() {
    word-break:     break-word;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    hyphens:         auto;
}

Source: css-tricks.com