Word wrap a link so it doesn't overflow its parent div width

Question

I have this piece of code:

div#permalink_section {
  width: 960px
}

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

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?

score 139 · Accepted Answer · edited Sep 03 '19 at 16:16

139

The following is a cross browser compatible solution:

#permalink_section
{
    white-space: pre-wrap; /* CSS3 */    
    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+ */
}

From How do I wrap text with no whitespace inside a <td>?

Check working example here.

edited Sep 03 '19 at 16:16

TylerH

20,799
66
75
101

answered Mar 09 '11 at 04:47

Hussein

42,480
25
113
143

1

there is no white spaces in my link, will the white-space property works? – Florent2 Mar 09 '11 at 04:57
1

Yes you need them for cross browser compatibility. I updated my answer and included a working example on jsfiddle. – Hussein Mar 09 '11 at 05:01
thanks Hussein for your help. I've noticed that in your example there are spaces, here is a fork without spaces http://jsfiddle.net/wxBxQ/ unfortunately I have currently access only to browsers supporting word-wrap, so I would have to check with browser not supporting word-wrap – Florent2 Mar 09 '11 at 05:06
I want to check that it is working with browsers not supporting `word-wrap:break-word` as I want to make sure the `white-space` property correctly limit the width for my links that don't contain white spaces. For that I'll try with older browsers, but for now I don't have access to them. – Florent2 Mar 09 '11 at 05:12
Thanks, this is great but not perfect. This only works if you set absolute widths. If width:100% this no longer works. To all those that don't know, width:100% means set the size to 100% of the outer container. Basically, I don't want horizontal scroll bars to appear on my page ever. Anyone have a solution? – pilavdzice Mar 22 '12 at 15:43
1

Its also worth noting that word-wrap has been withdrawn from the CSS3 spec: http://www.impressivewebs.com/new-css3-text-wrap/ – egr103 Apr 25 '12 at 10:09
this appears to work in ie7 but not ie9! which is a bit odd! – Ben Jul 10 '12 at 14:08
Doesn't work in Chrome 57.0.2987.133 – cgogolin Apr 29 '17 at 13:20
this is out of date, see lower answers – Simon Kenyon Shepard Sep 07 '20 at 10:05

score 24 · Answer 2 · edited Sep 03 '19 at 16:16

24

If you're okay with CSS3, there's a property for that:

word-wrap:break-word;

edited Sep 03 '19 at 16:16

TylerH

20,799
66
75
101

answered Mar 09 '11 at 04:39

corroded

21,406
19
83
132

score 11 · Answer 3 · edited Sep 03 '19 at 16:16

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

score 0 · Answer 4 · answered Jun 26 '12 at 15:26

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

score 0 · Answer 5 · edited Jan 05 '17 at 09:16

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 :(

TimFoolery · Answer 6 · 2011-03-09T05:09:19.000

0

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/

edited Mar 09 '11 at 05:09

answered Mar 09 '11 at 04:41

TimFoolery

1,895
1
19
29

thanks, `word-wrap:break-word` works fine, can't use the other solutions you proposed because I need to display the whole link – Florent2 Mar 09 '11 at 04:57

score 0 · Answer 7 · answered Mar 09 '11 at 04:45

0

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>

answered Mar 09 '11 at 04:45

does not work, for example `http://example.com/index?param=aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa`overflows – Florent2 Mar 09 '11 at 04:59
yes it does, I guess adding overflow:hidden; could help with that but it doesn't look good. – Mar 09 '11 at 05:02

Word wrap a link so it doesn't overflow its parent div width

7 Answers7

Linked