CSS Overflow

CSS Overflow
Nikhil
Published on 2021-07-08 09:15:59

Overflow Value Details


  • visible - Shows all overflowing content outside the element
  • scroll-  Hides the overflowing content and adds a scroll bar
  • hidden - Hides the overflowing content, both scroll bars disappear and the page becomes fixed
  • auto-  Same as a scroll if content overflows, but doesn't add scroll bar if the content fits
  • inherit - Inherit's the parent element's value for this property

overflow-wrap

overflow-wrap tells a browser that it can break a line of text inside a targeted element onto multiple lines in an otherwise unbreakable place. Helpful in preventing a long string of text from causing layout problems due to overflowing its container.

CSS

div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}

HTML

<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span
style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the
edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span
style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue
on the next line.
</div>

overflow css

overflow-wrap – Value Details


  • normal - Lets a word overflow if it is longer than the line
  • break-word - Will split a word into multiple lines, if necessary
  • inherit - Inherits the parent element's value for this property

overflow-x and overflow-y

These two properties work in a similar fashion as the overflow property and accept the same values. The overflow-x parameter works only on the x or left-to-right axis. The overflow-y works on the y or top-to-bottom axis.

HTML

<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>

CSS

div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}#div-y {
overflow-y: hidden;
}

overflow: scroll


HTML

<div>
This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
width:100px;
height:100px;
overflow:scroll;
}

scroll overflow css

The content above is clipped in a 100px by 100px box, with scrolling available to view overflowing content.

Most desktop browsers will display both horizontal and vertical scrollbars, whether or not any content is clipped. This can avoid problems with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

 

overflow: visible


HTML

<div>
Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
width:50px;
height:50px;
overflow:visible;
}

Result:

hidden overflow css

Content is not clipped and will be rendered outside the content box if it exceeds its container size.

 

Block Formatting Context Created with Overflow


Using the overflow property with a value different to visible will create a new block formatting context. This is useful for aligning a block element next to a floated element.

CSS

img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
<p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
<p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

overflow tutorial

This example shows how paragraphs within a div with the overflow property set will interact with a floated image.

 

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website