CSS - Overflow

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

Documentation / Reference





Discover More
Bootstrap - Navbar

in Bootstrap In Bootstrap 4, the Navbar is responsive by default and utilizes flexbox to make alignment of Navbar content much easier. The navbar-header class has been removed from Bootstrap 4, and the...
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
CSS - Block Box Layout

CSS - Block Box Layout CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: * create a block formatting context (layout) * and are involved in any...
Boxdim
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
Boxdim
CSS - Container Box (Containing)

A container is a box that contains other box Many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block. See also: Container block In general,...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
CSS - Position Property

The position property specifies the positioning algorithms (positioning scheme) for elements. The position is calculated with respect to the edges of a rectangular box called the containing block. ...
block directioninlinedirectionverticalwriting mode中文▼ left / block-end sideright / block-start side ▼top / inline-start side ▼bottom / inline-end side ▲width / block-sizeheight / inline-size
CSS - Flow

The flow is the direction of a block and inline layout against which the elements are positioned. This layout uses the concept of containing box as coordinate system. This containing box depends...
Css Flex Align Content
Flex - flex-wrap (Single Line or Multi-Line)

A flex container can be either single-line or multi-line, depending on the flex-wrap property. flex-wrap: nowrap: (Default)A single-line flex container lays out all of its children in a single line,...
HTML - Embed Element (Plugin Integration point)

The embedEmbed Element represents an integration point for plugin. The document property document.embeds and document.plugins return an HTMLCollection of the embed elements in the Document. To overcome...



Share this page:
Follow us:
Task Runner