The CSS Overflow Property

Defining overflow in CSS

By using the CSS overflow property, you can manipulate the element's behavior in cases when the content cannot fit within its borders. It is actually a shorthand for two CSS overflow subproperties:

• overflow-x
• overflow-y

Both of them can also be used separately:

div {
    overflow-x: hidden;
}

div {
    overflow-y: hidden;
}

CSS overflow syntax and property values

The syntax for overflow is similar to that of the other CSS shorthands – you need to write the values for both subproperties without actually typing their names:

overflow: overflow-x overflow-y;

overflow-x defines how left and right sides of a container react to overflowing content, and overflow-y; does the same for the top and bottom edges. If you only define one value, it will apply to both subproperties.

Both overflow-x and overflow-y take the same values:

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Dealing with CSS text overflow

The CSS text-overflow property defines how the browser will inform the user about the presence of overflowed text content:

div {
    text-overflow: ellipsis;
}

To use this property, you need to choose and define one out of three possible values:

text-overflow: value;

Browser Support

Chrome

1+

Edge

12+

Firefox

7+

IE

6+

Opera

11+

Safari

1.3+

Mobile Browser Support

Chrome

18+

Firefox

7+

Opera

11+

Safari

All