One of the challenges that print designers have when working with the web is the way the content fits. In print, such as a newspaper, if you have 3 inches of space in the document, then that is all the space you have. Content creators have to write copy or create images that fit in that 3 inches. If they write too much, the content must be edited to fit or the designer must make the font size smaller or the space for the content larger.
On the web, design spaces are a lot more fluid — especially with regard to height. The designer can create a block that is 3 inches tall, but if the content author writes too much, the block will expand to fit the content, stretching out the entire block to whatever the browser needs to fit it. This in turn, can change or even destroy the layout that the designer created.
CSS Provides the Answer with Overflow Properties
CSS gives you several properties to help handle content that is larger than the space provided. I’ve covered this in a previous article where I discussed how to create a box with scrolling text or other content. But CSS3 (and a few things that haven’t been added to CSS3 yet) gives you even more options to handle how the content fits in your layout blocks.
overflowoverflow-xoverflow-yoverflow-styletext-overflow
overflow, overflow-x, and overflow-y — are used to define whether and how the content is clipped when it overflows the content area. They can take one of the following values:visible– This is the default value. Any content that overflows the box will be displayed and push the content down.hidden– The content will be clipped at the borders of the box and not displayed at all.scroll– The content box will have scroll bars added whether or not they are required.auto– When the content is larger than the content box, then scroll bars will be added, otherwise they won’t.no-display– When the content doesn’t fit in the content box, the whole box is removed as ifdisplay: none;were used. This value is not supported by any web browsers, and may not be added to the final CSS3 specification.no-content– When the content doesn’t fit in the content box, the content is removed as ifvisibility: hidden;were used. This value is not supported by any web browsers, and may not be added to the final CSS3 specification.
CSS3 also adds a new property overflow-style to help you define how the overflow should look. You can define it as auto (the default) which indicates that you have no preference, and the browser should use the scrolling mechanism that is most appropriate. Or you can give a list of methods in order of preference. The methods include:
marquee-line– The content scrolls automatically horizontally (to the right and left).marquee-block– The content scrolls automatically vertically (up and down).
Earlier versions of the CSS3 specification had the following values :
scrollbar– Narrow strips on the side and/or bottom of the element with arrows to move the contents up and down or right and left. This is the most commonly seen type of scrolling method on the web.panner– A small rectangle inside the element that allows the user to move around the content. This is most commonly seen in photo galleries with large images.move– This is a scrolling method where the customer can move the contents directly. This is most often seen on touch screen devices. Usually the cursor turns into a hand or a cross of arrows to indicate that the content can be dragged around.marquee– This scrolls the content automatically so that it all is visible at some point in time.
The CSS3 Text-Overflow Property
This is a property specifically for text that needs to be clipped. This property allows you to clip the text with or without an ellipsis. This can make it much easier for customers to recognize that the text has been clipped. The default value is clip, but if you use text-overflow: ellipsis; This will add an ellipsis (…) right before the clipping occurs.
Sumber : webdesign.about.com
