Word-wrap as follows:
/* The Breakage of Too Long Words */
div.break_word {
width: 690px;
word-wrap: break-word;
}
does wrap the
Your p within div works fine even in IE6. Your div within pre is invalid HTML.
Word wrap can be implemented for IE in the following way as well:
div {
max-width: 200px;
word-wrap: break-word;
}
<div>loooooooooooooooooooooooooooooooooooooooooongword</div>
<div>long long long long long long long word</div>
As word-wrap is a CSS3 property, it is only supported by IE9 and higher. For IE8 try
-ms-word-wrap
So try
div.break_word {
width: 690px;
word-wrap: break-word;
-ms-word-wrap: break-word;
}
Hope this helps.
Update
It seems that even if you use -ms-word-wrap in IE7, it defaults the white-space: nowrap; which then overrides the word-wrap property.
Once again a IE hack is required. Try adding this for IE7.
white-space: normal;