Introduction

In SwiftUI, multiline text usually works by default once the view receives a finite width. Most layout problems happen not because wrapping is disabled, but because the surrounding stack, frame, or sibling views do not give the Text enough room to grow vertically.

Wrapping Depends on Width Constraints

A Text view wraps when the layout system knows how wide the text block is allowed to be. If the parent container leaves horizontal space effectively unbounded, the text may stay on one line.

1import SwiftUI
2
3struct WrappedMessageView: View {
4    let message = "SwiftUI wraps text when the view is given a constrained width."
5
6    var body: some View {
7        Text(message)
8            .padding()
9            .frame(maxWidth: 220, alignment: .leading)
10            .border(.blue)
11    }
12}

The explicit maxWidth gives SwiftUI a reason to break the text into multiple lines.

Align Wrapped Lines Correctly

If the text is wrapping but the lines are aligned strangely, use multilineTextAlignment. This affects the alignment of the lines inside the text block, not the position of the whole view inside its parent.

Text("This sentence is long enough to wrap onto more than one line in a narrow layout.")
    .frame(maxWidth: 220)
    .multilineTextAlignment(.center)

Use stack alignment, spacers, or frame alignment when you need to reposition the view itself.

Control Height with lineLimit

If the text should use all the lines it needs, leave the line limit unset or explicitly allow unlimited lines. If the design needs a fixed-height card or cell, cap the number of visible lines.

1VStack(alignment: .leading, spacing: 12) {
2    Text("This body copy can grow freely because it contains instructions the user should be able to read in full.")
3        .lineLimit(nil)
4
5    Text("This title should stay compact in a repeating card layout.")
6        .font(.headline)
7        .lineLimit(2)
8        .truncationMode(.tail)
9}
10.frame(maxWidth: 240, alignment: .leading)

This is a common split in real interfaces: important body content expands, while repeated headline text is bounded.

Fix Vertical Compression with fixedSize

Text inside an HStack or other competitive layout can be compressed vertically in a way that prevents the expected wrap. In that case, fixedSize(horizontal: false, vertical: true) is often the right fix.

1HStack(alignment: .top) {
2    Image(systemName: "doc.text")
3    Text("A long label should wrap to multiple lines instead of being squeezed into an unreadable single-line layout.")
4        .fixedSize(horizontal: false, vertical: true)
5}
6.frame(maxWidth: 220)

This tells SwiftUI to preserve the text's ideal height while still respecting horizontal constraints.

Use layoutPriority When Text Should Win Space

When text competes with icons, buttons, or spacers, SwiftUI may give the text less width than you expect. Raising layout priority can help.

1HStack(spacing: 12) {
2    Image(systemName: "exclamationmark.triangle")
3        .font(.title2)
4
5    Text("A network problem interrupted the upload. Try again when the connection is stable.")
6        .layoutPriority(1)
7
8    Spacer(minLength: 0)
9}
10.padding()
11.frame(maxWidth: 260)

This does not force wrapping by itself, but it tells the layout system that the text should lose less space than lower-priority siblings.

Use TextEditor for Editable Multiline Content

If the goal is user input, Text is the wrong control. Use TextEditor for editable multiline content.

1import SwiftUI
2
3struct NotesScreen: View {
4    @State private var notes = "Write meeting notes here"
5
6    var body: some View {
7        TextEditor(text: $notes)
8            .frame(height: 180)
9            .padding(8)
10            .overlay(
11                RoundedRectangle(cornerRadius: 8)
12                    .stroke(.gray.opacity(0.4))
13            )
14            .padding()
15    }
16}

TextEditor has very different behavior from Text, so choosing the right control early avoids many layout detours.

Common Pitfalls

One common mistake is assuming multiline text is broken when the real problem is an unconstrained parent width. Without width pressure, there is nothing to wrap against.

Another mistake is using multilineTextAlignment to try to move the entire view. It only changes how wrapped lines align inside the text block.

Developers also reach for fixed heights too early. That often looks fine in one language and then fails immediately for longer translations or larger accessibility font sizes.

Summary

• 'Text wraps when its layout receives a finite width.'
• Use multilineTextAlignment for line alignment, not overall view positioning.
• Use lineLimit and truncationMode when the design needs bounded height.
• Use fixedSize(horizontal: false, vertical: true) when text is being vertically compressed.
• Use TextEditor for editable multiline content instead of Text.