CSS line-stacking-strategy Property

Description

The line-stacking-strategy 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.

Initial value
inline-line-height
Applies to
Block level elements
Inherited
Yes
Media
Visual
Computed value
Specified value (except for initial and inherit)
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.lineStackingStrategy

Syntax

line-stacking-strategy: inline-line-height | block-line-height | max-height | grid-height

Values

  • inline-line-heightThe 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.
  • block-line-heightThe stack-height is determined by the block element 'line-height' property value. The 'line-height' property value is ignored for inline elements.
  • max-heightThe 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.
  • grid-heightThe 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.

Example

.class {
   line-stacking-strategy: max-height; 
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????