wordwrap a very long string

This question has been asked here before:

• Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
• word wrap in css / js
• CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
• CSS overflow with long URL

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.

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.

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

Someday...

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>