wordwrap a very long string

Css Problem Overview

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?

Css Solutions

Solution 1 - Css

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  (soft hyphen), <wbr> (word break tag), or  (zero-width space, same effect as  minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

Solution 2 - Css

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 http://www.w3.org/TR/css3-text/#hyphenate">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.

Solution 3 - Css

word-break:break-all works a treat

Solution 4 - Css

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

Solution 5 - Css

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Solution 6 - Css

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;

Solution 7 - Css

Hopefully someday we'll get access to the word-wrap property in CSS3: http://www.w3.org/TR/css3-text/#word-wrap">Force Wrapping: the 'word-wrap' property.

Someday...

Solution 8 - Css

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

Solution 9 - Css

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

Solution 10 - Css

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	Peter Craig	View Question on Stackoverflow
Solution 1 - Css	Paolo Bergantino	View Answer on Stackoverflow
Solution 2 - Css	Kevin Rapley	View Answer on Stackoverflow
Solution 3 - Css	Sam Jones	View Answer on Stackoverflow
Solution 4 - Css	adriatiq	View Answer on Stackoverflow
Solution 5 - Css	jamiescript	View Answer on Stackoverflow
Solution 6 - Css	Roman Losev	View Answer on Stackoverflow
Solution 7 - Css	Chad Birch	View Answer on Stackoverflow
Solution 8 - Css	Sooth	View Answer on Stackoverflow
Solution 9 - Css	Shraddha Mohite	View Answer on Stackoverflow
Solution 10 - Css	SDMulroy	View Answer on Stackoverflow