CSS/Properties/overflow

From W3C Wiki
Jump to: navigation, search

overflow

The overflow property specifies whether content of a block container element is clipped when it overflows the element's box.

Description

Values visible | hidden | scroll | auto | inherit
Initial value visible
Applies to non-replaced block-level elements, table cells, inline-table, and inline-block elements
Inherited No


Values

  • visible
    The content is not clipped.


  • hidden
    The content is clipped and no scrollbars are provided.


  • scroll
    The content is clipped and scrollbars are provided.


  • auto
    The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 h2{
   font-size: 1.0em;
 }
 section{
   width: 10em;
   float: left;
 }
 p{
   width: 5em;
   height: 5em;
   border-width: 1px;
   border-style: dotted;
 }
 #hid{
   overflow: hidden;
 }
 #sc{
   overflow: scroll;
 }
 #au{
   overflow: auto;
 }


[index.html]

<body>
  <h1>overflow exapmle</h1>
  <section>
    <h2>overflow: hidden;</h2>
    <p id="hid">The overflow property specifies whether content 
        of a block container element is clipped when it overflows the element's box. </p>
  </section>
  <section>
    <h2>overflow: scroll;</h2>
    <p id="sc">The overflow property specifies whether content 
        of a block container element is clipped when it overflows the element's box. </p>
  </section>
  <section>
    <h2>overflow: auto;</h2>
    <p id="au">The overflow property specifies whether content 
        of a block container element is clipped when it overflows the element's box. </p>
  </section>
</body>

Csslist2 overflow.png

CSS Reference

The CSS specification defines the overflow property in 11.1.1 Overflow.