Search within TutorialsPark

CSS Overflow


Use CSS overflow property to control the way the text is displayed when it overflows the box.


CSS Overflow Concepts

1. The CSS overflow property enables you to deal with situation where-in the size of the content is larger than the boxes containing them.

2. By default, the overflowing content spills out of the boxes(with fixed width and height) containing them, but this behaviour can be altered by using the CSS overflow property. .

Tables: Properties of CSS Overflow

Property Description
overflow-x Set the overflow style along the horizontal direction(x-axis)
overflow-y Set the overflow style along the horizontal direction
overflow Shorthand to set multiple overflow properties in a single declaration


Tables: Values of CSS Overflow Property

Value Description
auto Leaves it for the browser to apply scroll bars as and when required.It applies scroll bars when the content overflows or else doesn't
hidden The overflowing content is clipped and the user cannot see the hidden(i.e clipped) content.
scroll The browser created a scroll bar for the user to see the overflowing content. The scroll bar is visible even when the content does not overflow
visible The overflowing content spills out of the box and is displayed. Its the default value.
inherit The value of overflow is inherited from the parent element.

Demo: CSS Overflow Properties

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat , vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

overflow:


CSS overflow

1.To control the way the overflowing content is displayed on both the axis use CSS property overflow

Example: CSS Overflow overflow

Give it a TRY! » Note: The most suitable value for overflow is auto, as it lets the browser to apply scrolls when required.


CSS Overflow: Overflow-X and Overflow-Y

1.To control the way the overflowing content is displayed along horizontal(left and right edge) and vertical(top and bottom) axis, Use CSS property overflow-x and overflow-y respectively .

2. The value for overflow-x and overflow-y property is same as that for overflow.

Example: CSS Overflow - overflow-x and overflow-y

Give it a TRY! » Note: The most suitable value for overflow is auto, as it lets the browser to apply scrolls when required.