CSS - Overflow

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - 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.

Advertising

3 - Syntax

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.

4 - Example

4.1 - 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;
 }

Advertising

4.2 - 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;
}

4.3 - 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>

5 - Documentation / Reference

web/css/overflow.txt ยท Last modified: 2019/02/09 12:07 by gerardnico