Definition and Usage
This property determines the line stacking strategy for stacked line boxes within a containing block element. The term 'stack-height' is used in the context of this property description to indicate the block-progression advance for the line boxes.
| Name: | line-stacking-strategy |
| Value: | inline-line-height | block-line-height | max-height | grid-height |
| Initial: | inline-line-height |
| Applies to: | block-level elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | specified value (except for initial and inherit) |
Syntax
line-stacking-strategy : inline-line-height | block-line-height | max-height | grid-height;
Values
- inline-line-height
- The stack-height is the smallest value that contains the extended block progression dimension of all the inline elements on that line when those elements are properly aligned. Since the line spacing information is already included in the computation of the line box, these line boxes are simply stacked adjacent to one another in the formatted block to which they belong. The 'line-height' property value is taken into account for both the inline elements and the block elements. For inline elements, it defines the extended block progression dimension. For block elements, it defines the minimum extended block progression dimension.
- block-line-height
- The stack-height is determined by the block element 'line-height' property value. The 'line-height' property value is ignored for inline elements. For alignment purpose, this case is similar to the minimum extended block progression dimension case (strut model). This is the only line-stacking strategy that may cause inline boxes within the line to bleed before and after the line box because the line box is not constrained by its inline boxes.
- max-height
- The stack-height is the smallest value that contains the block progression dimension of all the inline elements on that line when those elements are properly aligned. The 'line-height' property value is taken into account only for the block elements.
- grid-height
- The stack-height is the smallest multiple of the block element 'line-height' computed value that can contain the block progression of all the inline elements on that line when those elements are properly aligned. The 'line-height' property value is ignored for inline elements.
When the line-stack strategy dictates that the inline element line-height be ignored, this means that for those elements only their block progression dimensions are considered for the stack-height, not their extended block progression dimensions.
Examples
.class {
line-stacking-strategy: max-height ;
}
