HTML and CSS Reference
In-Depth Information
If you feel that the content isn't very important, you can simply hide the overflow by giving it an overflow de-
claration of
hidden
.
2.
Add an
overflow
declaration:
overflow: hidden;
As shown in Figure 9-27, the overflowing content is now hidden,
but
the line of text at the bottom is cut off.
Because it's text being cut off and not something less forgiving, such as an image, hiding text in this way
isn't ideal. It may lead the users to becoming frustrated because they know they are missing out on some
content they can't get to.
Figure 9-27
The “Latest Blog Post” with its overflowing content hidden.
This is where
scroll
value for
overflow
comes in handy.
3.
Change the hidden value of the
overflow
declaration to
scroll
:
overflow: scroll;
Figure 9-28 shows how the “Latest Blog Post” box is displayed in Mozilla Firefox on an Apple Mac and a
Windows PC; now the box has a scroll bar of its own. Firefox, Opera, and Internet Explorer show both ver-
