Curriculum
Course: CSS
Login

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1
Text lesson

CSS Layout – Overflow

CSS Overflow

The overflow property determines whether to clip the content or introduce scrollbars when an element’s content exceeds its defined area.

It offers the following options:

  • visible: Default. Content extends beyond the element’s box.
  • hidden: Content is clipped, remaining content is invisible.
  • scroll: Content is clipped, and scrollbars enable viewing the rest.
  • auto: Similar to scroll, but scrollbars appear only as needed.

Note: The overflow property exclusively applies to block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are initially concealed and only become visible when in use, despite the presence of “overflow: scroll”.

overflow: visible

By default, overflow is set to visible, allowing content to extend beyond the element’s box without being clipped.

IMG_3504

Example

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

overflow: hidden

When set to “hidden”, overflow is clipped, resulting in the concealment of any excess content.

IMG_3505

Example

div {
  overflow: hidden;
}

overflow: scroll

When the value is set to “scroll”, overflow is clipped, and scrollbars are introduced to navigate through the content within the box. It’s important to note that this may generate both horizontal and vertical scrollbars, even if not both are required.

Example

div {
  overflow: scroll;
}

overflow: auto

The “auto” value functions similarly to “scroll”, but it introduces scrollbars solely when needed.

Example

div {
  overflow: auto;
}

overflow-x and overflow-y

The overflow-x and overflow-y properties determine whether to adjust the overflow of content horizontally, vertically, or in both directions.

overflow-x dictates the handling of content overflow along the left and right edges. overflow-y dictates the handling of content overflow along the top and bottom edges.

Example

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

All CSS Overflow Properties

Property

Description

overflow

Specifies the behavior when content exceeds the boundaries of an element’s box.

overflow-wrap

Specifies whether the browser is allowed to break lines containing long words that overflow their container.

overflow-x

Specifies the handling of content overflow along the left and right edges of the element’s content area.

overflow-y

Specifies the handling of content overflow along the top and bottom edges of the element’s content area.

 

 

Previous
Next