HTML and CSS Reference
In-Depth Information
he normal removal of excess white space in an element can be modiied with
the
white-space
property. he permissible values for this property are
normal
,
nowrap
,
pre
,
pre-wrap
,
pre-line,
and
inherit
. he nowrap value prevents the
browser from wrapping the line until a line-break character (
<br/>
) is encoun-
tered or the end of the element is reached. Content extending beyond the
width of the element is usually clipped.
he pre value of the
white-space
property causes the element to be treated
in the same manner as the pre HTML element. All line breaks and white space
in the element are respected and preserved. he
pre-line
value instructs the
browser to preserve line breaks but do normal excess white space removal
within each line. he
pre-wrap
value does somewhat the opposite, allowing
the browser to break lines that are too long for the width of the element, while
preserving the excess white space within each line. Neither the
pre-wrap
nor
pre-line
property is used very much.
he
vertical-align
property is most useful in aligning elements in table cells,
but it can be speciied for any element. When applied to table elements, the
permissible values are the keywords
top
,
middle,
and
bottom
. To understand
how these values work, consider the code shown in Example 3.12, which has a
three-row-by-three-column table. Because each table data cell is taller than the
image it holds, vertical alignment is called for.
Example 3.12: Vertical alignment in table cells
<!DOCTYPE html>
<html>
<head>
<title>Example 3.12</title>
<style type="text/css">
td,th { height: 150px; width: 72px; text-align: center; }
#row1 { vertical-align: top; }
#row2 { vertical-align: middle; }
#row3 { vertical-align: bottom; }
</style>
</head>
