region-fragment

< css‎ | properties
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
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.


Compatibility

There is no data available for topic "css", feature "region-fragment". If you think that there should be data available, consider opening an issue.


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

See also

External resources