region-fragment
region-fragment
W3C Editor's 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 | Yes |
| 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.
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:
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.
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| CSS Regions Module Level 3 |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 20 -webkit |
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 | Unsupported |
See also
Related articles
Regions
- region-fragment
External resources
- W3C editor's draft: CSS Regions Module Level 3
- Adobe Web Standards: CSS Regions
- Adobe Developer's Network: CSS3 Regions: Rich page layout with HTML and CSS3
- Sample pages
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here