Sometimes a long line of text will go beyond the boundaries of a container, failing to word-wrap. Unfortunately, there isn't an universal CSS solution that works on all browsers, including older versions. You have to use several proprietary fixes to correct this.
1
2
3
4
5
6
7
8
9
10
11
12
| .wordwrap{ white-space: pre; /* CSS2 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ _white-space: pre; /* IE hack to re-specify in addition to word-wrap */} |
Most of this code is from Ian Hickson, which Lim Chee Aun blogged about in Whitespace and generated content, explaining the intricacies about this problem. You can also find more information at Pre-wrap alternatives.
