Code has been added to clipboard!

The CSS Overflow Property

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

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:

Example
div {
    overflow-x: hidden;
}
Example
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:

Value Description
visible The default value. The content is not clipped and may overflow the padding box
hidden The content can be clipped, and the user can only scroll programmatically
clip The content can be clipped, and the user cannot scroll (even programmatically)
scroll The content can be clipped, but the user can scroll using a scrollbar in CSS
auto Element's behavior depends on the browser
Udacity
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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:

Example
div {
    text-overflow: ellipsis;
}

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

text-overflow: value;

Value Description
clip The default value. The text is clipped at the edge of the container, even if it's the middle of the character/td>
ellipsis An ellipsis ('…') is shown at the end of the clipped text inside the container
string A specified string is shown at the end of the clipped text inside the container

Browser Support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
7+
Browser image
IE
6+
Browser image
Opera
11+
Browser image
Safari
1.3+

Mobile Browser Support

Browser image
Chrome
18+
Browser image
Firefox
7+
Browser image
Opera
11+
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0