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
|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
|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
1.To control the way the overflowing content is displayed on both the axis use CSS property overflow
Example: CSS Overflow overflowGive 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.