HTML and CSS Reference
In-Depth Information
FIGURE 3.11
Using multiple
text shadows to produce a
more sophisticated 3D effect.
Yo u j u s t w r i t e e a c h a d d i t i o n a l t e x t s h a d o w o n e a f t e r t h e o t h e r i n s i d e t h e s a m e
property separated by commas. The preceding example produces a rather pleas-
ing, raised 3D text effect (
Figure 3.11
), which blends in well with any backgrounds
behind it because RGBA colors are used for the outermost shadows.
CONTROLLING TEXT OVERFLOW
The
text-overflow
property can be used to control the display of text, which
overflows its containing box (when
overflow: hidden;
is set on it). It is included
on the
<p>
element in my text-overflow.html example in the chapter3 code down-
load folder:
p {
: ;
: ;
: ;
}
I deliberately included a very long word in this example so it would overflow
the
<body>
box, which was set to 400px wide.
text-overflow: ellipsis;
can
replace the usual unsightly clipping behavior with slightly nicer-on-the-eye ellipses.
Figure 3.12
shows the result.
text-overflow: ellipsis;
is not an essential new addition to your toolkit,
but it is a useful addition when you want potential text overflow to look a bit less
unsightly. It is supported across all major modern browsers.
