CSS text wrapping including liine breaks
I have an html pre tag that I has text in it. I want the text to wrap if it extends past the bound of the box its in and I also want the ability to use linebreaks within the text. Try this out for yourself and you’ll see that it’s one or the other. Normal line breaks won’t work when using wrapping and normal html br tags won’t work either. So what’s the solution? I found this email which describes a css hack.
.wordwrap {
white-space: pre-wrap; /* css-3 should we be so lucky… */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 ?? */
white-space: -o-pre-wrap; /* Opera 7 ?? */
word-wrap: break-word; /* Internet Explorer 5.5+ */
_white-space: pre; /* IE only hack to re-specify in addition to
word-wrap */
}
November 9th, 2005 at 9:42 pm
Thank you for this post. I used to to fix a problem under IE where the bounding box would grow regardless of the width.
As is, the fix made things worse in Firefox, though. Removing the mozilla line helped a little, but it still didn’t cause the wrapping that was done in IE — but at least the bounding box doesn’t grow.
Thanks for the tip!