How to word wrap text in HTML?

Question

How can text like "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" which exceeds the width of a div(say 200px), be wrapped?

I am open to any kind of solution such as CSS, jQuery, et cetera.

Answer 1

Try this:

div {
    width: 200px;
    word-wrap: break-word;
}

Answer 2

You can use a soft hyphen like so:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

This will appear as
aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa
if the containing box isn't big enough, or as
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
if it is.

Answer 3

div {
// set a width
word-wrap: break-word

}

The 'word-wrap' solution only works in IE and browsers supporting CSS3.

The best cross browser solution is to use your server side language (php or whatever) to locate long strings and place inside them in regular intervals the html entity #8203; This entity breaks the long words nicely, and works on all browsers.