W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

CSS Inline Style

Internal Style Sheet

External Style Sheet

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

Display, Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS2 Overflow Property

The CSS2 overflow property specifies what should happen if content is more than an element's height. CSS overflow property allow you to specify whether to clip content, render scroll bars or display overflow content. Note: The overflow property only works for block elements with a specified height. Overflow property value can be as follows:

Property ValueDescription
visible This is the default value of overflow, it describe's the text will be overflow outside the box if the contents is too big.
hidden Only the overflow content that are not cliped in the element will be hidden.
scroll Scrollbar will appear to scroll the overflow contents. Scrollbar's are always appear whether it is required or not.
auto Scrollbar will appears only if the contents is too big to fit in a HTML element. Otherwise, scrollbar will be hidden.

Example: Overflow

CSS3 Overflow Property

CSS3 also defines the overflow-x and overflow-y properties which allow you to independently control of the vertical and horizontal scrolling. CSS3 Overflow has 2 new property i.e. overflow-x and overflow-y

CSS3 overflow-x property

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it is overflows at the left and right edges. Possible values can be overflow-x: visible | hidden | scroll | auto

CSS3 overflow-y property

The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges. Possible values can be overflow-y: visible | hidden | scroll | auto