Home » Html » Word wrap a link so it doesn't overflow its parent div width. [duplicate]

Word wrap a link so it doesn't overflow its parent div width. [duplicate]

Posted by: admin November 29, 2017 Leave a comment

Questions:

This question already has an answer here:

Answers:

The following is a cross browser compatible solution.

#permalink_section
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Check working example at http://jsfiddle.net/5zsqP/1

Questions:
Answers:

if you’re okay with css3, there’s a property for that:

word-wrap:break-word

Questions:
Answers:

wrap link inside another div with smaller width

<html>
<head><title></title>

<style type="text/css">
div#permalink_section { width: 960px }

</style>
</head>
<body>
<div id='permalink_section'>
<div id="linkwrap" style="width:100px">
  <a href="here goes a very long link">here goes a very very long link</a>
  </div>
</div>
</body>
</html>

Questions:
Answers:
div#permalink_section
{   
    width:960px;
    overflow:hidden;
}

or

div#permalink_section
{   
    width:960px;
    word-wrap:break-word
}

or use javascript to truncate the length of the link’s text, replacing the end with “…”

Working example of the JS method: http://jsfiddle.net/fhCYX/3/

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

overflow:hidden seems to be the key to making an element of size:auto break-word correctly

<ul class="list">
<li class="item">
    <div class="header">
      <div class="content"></div>
    </div>
    <div class="body ">
<p>Loremipsumdolorsitametconsecteturadipisicingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</p>
    </div>
</li>

</ul>
​

.list {
    border: 1px solid black;
    margin: 50px;
}

.header {
    float:left;
}

.body {
    overflow: hidden;
}

.body p {
    word-wrap: break-word;
}

.header .content {
    background: #DDD;
    width: 80px;
    height: 30px;
}

http://jsfiddle.net/9jDxR/

That example includes a left float as I was trying to achieve a media-object like layout.

Unfortunately if you try to use table-cell elements it breaks again 🙁

Questions:
Answers:

You could also wrap each letter of the link in <span></span> using javascript for example.

<a href="http://foo.bar"><span>f</span><span>o</span><span>o</span></a>

But I would go for the css3 approach.

2017 Disclaimer: This is not a good solution and I never said it was. If you still feel the need to comment, please at least read the previous comments