Xah Lee, 2005-11
This article explains how to control the text wrapping in HTML/CSS.
CSS2 provides 4 possible values for the attribute “white-space”. They are: “inherit”, “normal”, “pre”, “nowrap”. The attribute “white-space” is used for the paragraph tag <p> to specify how white spaces or line returns are treated.
<p style="white-space:normal">...</p>
With “white-space: normal”, the browser consolidate sequences of white spaces into a single one, and any white space location can be choosen by the browser to wrap the line for display. This is the normal behavior of the paragraph tag “<p>”.
Note that white spaces are any of space, tab, and newline characters. You can always use “<br>” tag force a line break in display.
<p style="white-space:pre">...</p>
With “white-space: pre”, the behavior is the same as the “<pre>” tag. White spaces are shown as they are, and any newline characters will start a new line of display. This is often used for showing computer program code. With “white-space:pre”, the lines does not rewrap when the window size changes. They stay the way they are formatted in your html source code. Try resize your window to very narrow, and see that this paragraph does not re-wrap.
<p style="white-space:nowrap; width:60ex">...</p>
With “white-space: nowrap”, the browser do not wrap lines.
It does not wrap the line even if there is a newline char.
Nor does it wrap the line when the line reaches the window edge.
The only way to line-wrap would be using the “<br>”.
White spaces are still consolidated.
A common way to control wrap for paragraphs is simply to use the “width”. Like this:
<p style="width:60ex">...</p>
That will limit the width to 60 “ex” unit. A “ex” unit is basically the height of the lowercase letter “x”. (note that this does not guarantee that your paragraph will have 60 characters per line, but usually slightly more. Exactly how many characters per line with “width:60ex” depends on the font used.)
You can always force a line break by using “<br>”. For location of whitespace where you absolutely do not want the browser to cut the line, you can use the unicode character named NO-BREAK SPACE “ ”. Its decimal value is 160, hex is A0. The html entity is “ ”.
Sometimes you want your text to flow into multiple columns, as in newspaper. However, as of 2005-12 this is not yet possible.
If you want multi-columns, you have to hard-code your paragraphs into HTML Table's multiple columns. It is a pain because when you add or delete paragraphs, you have to manually shift the text among the columns. (There are some javascript solution for auto column flow but it is very complex)
A proposed solution is in CSS3 “Multi-column layout”. See http://www.w3.org/TR/css3-multicol/. However, this is not supported in major browsers as of 2010-03. (See: multi-column_test.html)