Multiline Text Alignment Modifier

The Multiline Text Alignment modifier sets the alignment of a Text layer that contains multiple lines of text.

Overview

The Multiline Text Alignment modifier defaults to Leading-aligned when there are multiple lines.

You can set the alignment to Leading, Center or Trailing-aligned and the modifier will apply the alignment to all the lines of text in the Text layer.

Text layers automatically wrap text as soon as they don’t fit in the available width. With the Line Limit modifier, you can set the number of lines that a Text layer can wrap to before it starts truncating the text.

The Multiline Text Alignment modifier can flow down the layer hierarchy, affecting all the child Text layers. For example, you can apply the modifier to a VStack to configure all the Text layers within it.

Single Line Text Layer

The Multiline Text Alignment modifier has no effect on the position of a single-line Text layer because the Text layer matches the exact width of the text line.

To position a single-line Text layer within a component to the Leading or Trailing edge, add the Frame modifier or embed it in a stack, and adjust the Alignment parameter.

Aligning Text Fields

The Multiline Text Alignment modifier does affect the alignment of the Text Field container, even when there’s only a single line, because the layer’s width isn’t dictated by the width of the text it contains.