HTML and CSS Reference
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-
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.