To display multi-line text, the basic idea is applying the white-space CSS property to the element with one of following values: pre, pre-wrap and pre-line. This property controls the processing of whitespace inside an element. The exact value you need depends on the behavior you want. In this post, I’m using pre-wrap as the example, which means “Sequences of whitespace are preserved. Lines are broken at newline characters, at
, and as necessary to fill line boxes.”. Here’s the code snippet from the skin of the sample application:
white-space: -moz-pre-wrap; /* Mozilla */
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word; /* IE 5.5-7 */
In this rule, the word-wrap CSS property specifies whether the break within a word is allowed to prevent overflow when an otherwise-unbreakable string is too long to fit within line box. The property is applies only when the white-space property allows wrapping. The value of break-word means “Normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.” This property is useful for the cases, such as really long URLs.