This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

region-fragment

Summary

Controls whether the last region in a chain displays additional ‘overset’ content according its default overflow property, or if it displays a fragment of content as if it were flowing into a subsequent region.

Overview table

Initial value
auto
Applies to
CSS Regions
Inherited
No
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
regionFragment
Percentages
N/A

Syntax

  • region-fragment: auto
  • region-fragment: break

Values

auto
Region element displays overset content according to its overflow property.
break
Region element overrides overflow property, displaying whatever fragment of overset content can fit within the region.

Examples

<style>
  article {
    flow-into: article-flow;
  }
  #region-1, #region-2 {
    flow-from: article-flow;
    region-fragment: break; /* or auto */
    overflow: visible; /* or hidden */
  }
</style>

<body>
  <article>...</article>
  <div id="region-1"></div>
  <div id="region-2"></div>
</body>

Usage

 In the following example, 'region_1' can accommodate the article's gray text, 'region_2' can  accommodate the blue text, and the red  'overset' text does not fit within the region chain:

region fragment.png

Setting region-fragment to break suppresses display of the overset text, as shown in the example at the bottom. Setting region-fragment to its default auto value makes overset content display according to whatever overflow property is defined, as shown in the two examples on the right. Even overflow:hidden may display part of the first line of overset text.

The property only applies to the final element in a region chain that is not large enough to accomodate remaining content. To behave as a 'region’, the element’s flow-from must specify a named flow, and display content from a corresponding flow-into.

For an overview of CSS Regions, see Using CSS Regions to flow content through a layout.

Notes

This property was formerly named region-overflow.

Related specifications

CSS Regions Module Level 1
W3C Working Draft

See also

External resources