Contents
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-xoverflow-y
Both of them can also be used separately:
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 |
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:
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 |