CSS Overflow

Prev
Next

CSS Overflow

CSS overflow property decides what to do with bigger content when they are not able to fit in the content boundary.

There are multiple ways of handling the “CSS text overflow” condition like –

  • Allow the overflown texts to be visible in next available areas.
  • Hides the overflown texts.
  • Wrap the text.
  • Make the area as a scrollable area.
Overflow CSS properties
CSS Overflow cheat sheet

1. CSS Overflow Visible

The content which is not able to fit in the content area goes to the next available area or box.

The Syntax of Overflow Visible:
overflow:visible;

Example

div.visible {
  width: 400px;
  padding:5px;
  height: 80px;
  color:blue;
  background-color: yellow;
  font-family: Arial;
  overflow:visible;
}

div.default {
  width:400px;
  height: 100px;
  background-color: tomato;
  font-family: Arial;
}
Run the Code

Note/Info:
Overflow:visible is the default value of CSS overflow property.

2. CSS Overflow Hidden

The overflow:hidden property hides the extra content which is not able to fit in the content area & makes the content not visible but flows outside the marked content area.

The Syntax of CSS Overflow hidden:
overflow:hidden;

Example

#overflow-invisible
{
  background-color: skyblue;
  width: 600px;
  height: 60px;
  padding:10px;
  overflow: hidden;
}
Run the Code

3. CSS Overflow Wrap

The CSS overflow wrap controls  –

  • By breaking the lines at white spaces position or at ends, or
  • By breaking the long text or word if it does not fit the content area.

The Syntax of Overflow Wrap:
overflow-wrap:normal;         (The line will break at white spaces only) 
overflow-wrap:break-word;   (The long words must break at appropriate position)

Example

#overflow-wrap-normal
{
  background-color: yellow;
  width: 220px;
  height: 200px;
  padding:10px;
  overflow-wrap: normal;
}

#overflow-wrap-break
{
  background-color: pink;
  width:220px;
  height: 130px;
  padding:10px;
  overflow-wrap:break-word;
}
Run the Code

4. CSS Overflow Scroll

The CSS overflow:scroll property will always add scroll bars.

It does not matter if the content overflows or not but it will always add scrolling in the horizontal and vertical direction.

The Syntax of Overflow Scroll:
overflow: scroll;

When you code overflow:scroll, then it will add a vertical scrollbar along the right side border & a horizontal scrollbar along the bottom side border.

Example

.overflow-scroll
{
  background-color: aqua;
  width: 220px;
  height: 80px;
  padding:5px;
  overflow: scroll;
}
Run the Code

5. CSS Overflow Auto

The CSS overflow:auto property will add a vertical scroll bar whenever it is needed.

This means that if the content does not overflow the content boundary, it will not add a vertical scrollbar but if the content overflows the content boundary, it will automatically add a vertical scrollbar.

The Syntax of Overflow Auto:
overflow: auto;

When your content does not overflow, there is no vertical scrollbar.
When your content overflows, a vertical scrollbar will be added automatically.

Example

.overflow-auto-ns
{
  background-color: lightblue;
  width: 250px;
  height:100px;
  padding:5px;
  overflow: auto;
}

.overflow-auto-s
{
  background: indianred;
  width:250px;
  height: 70px;
  padding:5px;
  overflow: overlay;
}
Run the Code

6. CSS Overflow x and Overflow Y

The CSS overflow-x property controls the overflow of the text in a horizontal position x-axis so this is ‘overflow scroll horizontal’.

The Syntax of Overflow x:

overflow-x: scroll;    /* This will create a horizontal scrollbar */
overflow-x: hidden;  /* The overflow content will either hide in the horizontal direction or will move down to the next line */
overflow-x: auto;  /* The overflow content will add a horizontal scrollbar only when required */

The CSS overflow-y property controls the overflow of the text in vertical position y-axis

The Syntax of Overflow y:

overflow-y: scroll;    /* This will create a vertical scrollbar. It is like CSS overflow scroll y*/
overflow-y: hidden;  /* The overflow content will either hide in vertical direction */
overflow-y: auto;     /* If the content overflows, this will automatically add a vertical scrollbar*/

overflow-x:scroll will add a horizontal scrollbar while overflow-y:auto will automatically add a a vertical scrollbar if the content overflowsoverflow-x:scroll will add a horizontal scrollbar while overflow-y:auto will automatically add a a vertical scrollbar if the content overflowsoverflow-x:scroll will add a horizontal scrollbar while overflow-y:auto will automatically add a a vertical scrollbar if the content overflows

Example

#overflow-x-y
{
  background-color: tomato;
  width: 300px;
  height: 100px;
  padding:10px;
  overflow-x: scroll;
  overflow-y: auto;
}
Run the Code

7. CSS Text overflow

The text-overflow decides how the content should be displayed to the user in case the content overflows.

Normally, we can do either of these-

  • Clip – Shorten the extra content & the user cannot see this extra content.
  • Ellipsis – Put some dots(like . . .) & the extra content will be shortened.
The Syntax of text-Overflow:

text-overflow: clip;
text-overflow: ellipsis;

Note:
There are other ways which are rarely used like :
text-overflow: initial;
text-overflow: inherit;

Let us take an example of CSS Overflow ellipsis & CSS overflow Clip.

Example

.overflow-clip
{
  background-color: tomato;
  width: 220px;
  height: 150px;
  padding:5px;
  overflow-wrap: normal;
  overflow: hidden;
  text-overflow: clip;
}

.overflow-ellipsis
{
  background-color: pink;
  width:220px;
  height: 130px;
  padding:10px;
  overflow-wrap: normal;
  overflow: scroll;
  text-overflow: ellipsis;
}
Run the Code

CSS Interview Questions and Answers

CSS overflow property is used to set the content within the boundary line.

There are 5 types of CSS overflow properties:-

Overflow: visible;

When the content is not fitted within the given area it overflows the content to the next available area.

Overflow:hidden;

When the content is not fitted within the given content area. It hides the remaining contents.

Overflow: wrap;

It breaks the long text or word if it does not fit the given content area.

Overflow: scroll;

When content is more than the given area it adds a horizontal or vertical scroll bar.

Overflow:auto;

It automatically adds scroll bar when content is more from the given area.

CSS Overflow scroll will always add a vertical and horizontal scrolling & it does not matter if the content overflows the content area or not.

Syntax:

overflow: scroll;

CSS Overflow auto will only add a vertical and horizontal scrolling when the content overflows the content area so it adds scrolling automatically when required.

Syntax:

overflow: auto;

The text-overflow decides how the content should be displayed to the user in case the content overflows.
Example:

text-overflow: clip;
text-overflow: ellipsis;
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!