About
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box.
The overflow property specifies whether content of a block container element is clipped when it overflows the element's box.
Syntax
- Value: visible | hidden | scroll | auto | inherit
- Initial: visible
- Applies to: block containers
- Inherited: no
Value Meaning:
- visible: Nothing clipped. All content will be rendered outside the block box.
- hidden: Content is clipped without scrolling user interface. The content can't be view outside of the clipping region.
- scroll: Content is clipped with a scrolling user interface whether or not any of its content is clipped. When this value is specified and the target medium is 'print', overflowing content may be printed.
- auto: The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.
Example
Visible
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
blockquote {
width: 125px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
border: thin dashed black
}
cite {
display: block;
text-align: right;
border: none
}
div {
width: 100px;
height: 100px;
border: thin solid red;
}
Hidden
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
blockquote {
width: 125px;
height: 100px;
margin-top: 50px;
margin-left: 50px;
border: thin dashed black
}
cite {
display: block;
text-align: right;
border: none
}
div {
width: 100px;
height: 100px;
border: thin solid red;
overflow:hidden;
}
Trim on left
.outer-div {
width:200px;
text-align:right;
white-space:nowrap;
border: 1px solid #ddd;
overflow:auto;
}
.inner-div {
float:right;
}
<div class="outer-div">
<div class="inner-div">
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
</div>
</div>