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 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.
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.
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.
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.
This example shows how paragraphs within a div with the overflow property set will interact with a floated image.
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website