region-fragment

Jump to: navigation, search

region-fragment

This article is Ready to Use.


W3C Working Draft

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

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.

Compatibility

No compatibility data found for feature "region-fragment"


Examples

CSS

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

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

Specification Status Related Changes
CSS Regions Module Level 1 W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
534 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
537 -webkit

See also

External resources