75

How can you display a long string, website address, word or set of symbols with automatic line breaks to keep a div width? I guess a wordwrap of sorts. Usually adding a space works but is there a CSS solution such as word-wrap?

For example it (very nastily) overlaps divs, forces horizontal scrolling etc. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

What can I add to the above string to fit it neatly within a few lines in a div or within the browser window?

IAdapter
  • 62,595
  • 73
  • 179
  • 242
Peter Craig
  • 7,101
  • 19
  • 59
  • 74
  • 5
    Even Stack Overflow doesn't word wrap : / – AlbertoPL May 13 '09 at 06:10
  • 16
    Well.... 10 months on and it looks like stackoverflow now has a fix for the original messy post - they've added the style word-wrap: break-word; which does the trick in Chrome. – Peter Craig Apr 02 '10 at 09:07

11 Answers11

88

This question has been asked here before:

Long story short:

As far as CSS solutions go you have: overflow: scroll; to force the element to show scrollbars and overflow:hidden; to just cut off any extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are IE only (break-word is in the CSS3 draft, however, so it will be the solution to this 5 years from now).

Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject &shy; (soft hyphen), <wbr> (word break tag), or &#8203; (zero-width space, same effect as &shy; minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

Community
  • 1
  • 1
Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • I've marked this as the "solution" to the question, but to me it still has a few holes... break-word is essentially what I'd be looking at, the other options can insert manual breaks, spaces, hyphens etc but still won't neatly wrap the line. – Peter Craig May 13 '09 at 13:47
  • Unfortunately there is no neat or elegant solution to this particular problem. We're all just getting by until break-word is supported. – Paolo Bergantino May 13 '09 at 17:40
  • If you end up doing server side line breaks, and you're using PHP, you can use the [wordwrap](http://php.net/manual/en/function.wordwrap.php) function. – Roman Dec 15 '09 at 07:53
  • Even break-word doesn't really solve the problem cleanly. It will break short words that shouldn't be broken (at least on Firefox). Ideally it would only do a break on words that are longer than the div width. For words that are shorter than the div width it should move it to the next line instead. – Ryan Jul 09 '13 at 17:44
  • Oh, it looks like I need to use "word-wrap: break-word;" and not "word-break: break-all;", the later is for use with CJK text (Chinese, Japanese, and Korea). And looks like even word-wrap is being replaced by "overflow-wrap" in the latest CSS draft. This stuff is confusing. – Ryan Jul 09 '13 at 20:28
  • 11
    Hey, it's me, five years in the future. You were right! – SomeKittens Dec 14 '14 at 02:03
32

word-break:break-all works a treat

Sam Jones
  • 4,443
  • 2
  • 40
  • 45
31

word-wrap: break-word; is available in IE7+, FF 3.5 and Webkit enabled browsers (Safari/Chrome etc). To handle IE6 you will also need to declare word-wrap: break-all;

If FF 2.0 is not on your browser matrix then using these is a viable solution. Unfortunately it does not hyphenate the preceding line where the word is broken which is a typographical nightmare. I would suggest using the Hyphenator as suggested by Paolo which is unobtrusive JavaScript. The fall-back for non JavaScript enabled users will then be the broken word without hyphens. I can live with that for the time being. This problem will most likely arise in a CMS, where the web designer does not have control over what content will be entered or where line-breaks and soft-hyphens may be implemented.

I have taken a look at the W3 specification where hyphenation in CSS3 is discussed. Unfortunately it appears there are a few suggestions but nothing concrete yet. It appears the browser vendors are yet to implement anything either yet. I have checked both Mozilla and Webkit for proprietory code but there is no sign of any.

Kevin Rapley
  • 311
  • 3
  • 3
  • This worked for me. Most of the world has IE7+, FF3.5+ or Webkit now, so I think you are set to use word-wrap: break-word. – Jeff Davis Mar 31 '11 at 22:07
11

Just mentioned this over here but probably more relevant to this question. The best property shortly will be overflow-wrap. and the best value if it gets implemented would be:

* {
   overflow-wrap:hyphenate. 
}

Doesen't seem to be supported in any way just yet at the time of writing on the iphone or firefox, and overflow-wrap:hyphenate isn't even in the working draft.

in the meantime i'd use:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}
Community
  • 1
  • 1
adriatiq
  • 326
  • 1
  • 3
  • 8
3
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you
jamiescript
  • 1,284
  • 1
  • 11
  • 18
3

I use the code for preventing all long strings, urls and so on..

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
Roman Losev
  • 1,911
  • 19
  • 26
2

Hopefully someday we'll get access to the word-wrap property in CSS3: Force Wrapping: the 'word-wrap' property.

Someday...

Chad Birch
  • 73,098
  • 23
  • 151
  • 149
1

Normally Cells will do this naturally, but you could force this behavior on a div with:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}
Sooth
  • 2,834
  • 23
  • 26
0

Always specify line-height property - if you don't specify, it might cause the failure of your word-break: break-all; property.

Unihedron
  • 10,902
  • 13
  • 62
  • 72
Shraddha Mohite
  • 1
0

It seems that this does the trick for latest Chrome:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

I have not checked any browsers but Chrome.

SDMulroy
  • 54
  • 6
0

Using word-wrap: break-word.

div {
  font-family: monospace;
  border: 1px solid red;
  width: 300px;
}
.wrap-me {
  word-wrap: break-word;
  color: red;
}
<div>
<p>
https://one.two.three.four.five.com/this/is/a/really/long/link/which/overflows
</p>
<p class="wrap-me">
https://one.two.three.four.five.com/this/is/a/really/long/link/which/wraps
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat dui, fringilla sit amet semper ut, tristique ut nulla. Sed turpis quam, tincidunt ac pellentesque eu, tristique nec elit. Nam placerat vitae nisi in blandit. Quisque magna purus, facilisis rhoncus pulvinar in, pretium id magna. Aenean magna arcu, maximus eu metus sit amet, tempor laoreet turpis. In consectetur, purus in laoreet laoreet, odio nisi hendrerit erat, et blandit lectus augue et massa. Vestibulum non mauris consectetur, elementum urna vitae, convallis tellus. Vivamus vehicula interdum ligula eu tempus. Nunc accumsan semper sem, sed vestibulum tortor porttitor vulputate. Nam efficitur turpis a justo consectetur dignissim. Integer justo elit, bibendum et neque eget, porttitor lobortis elit. Etiam scelerisque risus quam, non suscipit odio varius id. Curabitur magna purus, pellentesque ut vehicula non, viverra in turpis. Integer sollicitudin suscipit augue id accumsan. Fusce condimentum nisi non suscipit auctor. Integer luctus odio id purus gravida iaculis.
</p>
</div>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51