UIStackView
multiline label
iOS development
Swift
UI design

Multiline label in UIStackView

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Making a UILabel wrap correctly inside a UIStackView usually comes down to two things: allow the label to use multiple lines, and make sure Auto Layout gives it a real width to wrap against. When either of those is missing, the label may stay on one line, truncate unexpectedly, or produce ambiguous layout behavior.

Start with numberOfLines = 0

The first requirement is to let the label use as many lines as it needs.

swift
1let label = UILabel()
2label.numberOfLines = 0
3label.lineBreakMode = .byWordWrapping
4label.text = "This is a long piece of text that should wrap onto multiple lines inside a stack view."

Setting numberOfLines to 0 tells the label it may grow vertically. Without that, the label is limited to a single line no matter how the stack view is configured.

Put the Label in a Stack View with a Width Constraint

Wrapping depends on width. If the label has no effective width, Auto Layout has no basis for deciding where line breaks should occur.

swift
1let stackView = UIStackView()
2stackView.axis = .vertical
3stackView.spacing = 8
4stackView.translatesAutoresizingMaskIntoConstraints = false
5
6stackView.addArrangedSubview(label)
7
8view.addSubview(stackView)
9NSLayoutConstraint.activate([
10    stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
11    stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
12    stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20)
13])

Those leading and trailing constraints give the stack view a width, which in turn gives the label a width to wrap within.

Horizontal Stacks Need Extra Care

Multiline labels are most predictable in a vertical stack. In a horizontal stack, the label competes with sibling views for width, so content hugging and compression resistance become more important.

swift
1let iconView = UIImageView(image: UIImage(systemName: "info.circle"))
2iconView.setContentHuggingPriority(.required, for: .horizontal)
3iconView.setContentCompressionResistancePriority(.required, for: .horizontal)
4
5label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
6
7let horizontalStack = UIStackView(arrangedSubviews: [iconView, label])
8horizontalStack.axis = .horizontal
9horizontalStack.alignment = .top
10horizontalStack.spacing = 8

In this configuration, the icon resists shrinking, while the label is allowed to take the remaining width and wrap to additional lines.

Dynamic Type and Intrinsic Size Still Work

A multiline label inside a stack view can still participate in Dynamic Type normally:

swift
label.font = .preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

UIStackView does not render content itself, but it respects the intrinsic size of arranged subviews. Once the label is allowed to wrap and has a width, its intrinsic height expands naturally.

That means you usually do not need special multiline APIs on the stack view itself. The stack view's job is to arrange subviews. The label's job is to advertise the correct intrinsic size once wrapping is enabled.

Common Pitfalls

The biggest mistake is forgetting numberOfLines = 0. Developers often add stack constraints and then wonder why the text still truncates on a single line.

Another issue is giving the stack view no usable width. If the stack view is missing horizontal constraints, the label may have no meaningful line-breaking width and Auto Layout cannot produce the result you expect.

Horizontal stacks are another source of confusion. If a sibling view resists compression too strongly, the label may be squeezed into a tiny width or truncated. Adjust hugging and compression priorities so the label can wrap instead of being crushed.

Finally, avoid fixed heights on the label or stack view unless the design truly requires them. Fixed heights often fight the label's intrinsic content size and cancel out multiline behavior.

Summary

  • Set label.numberOfLines = 0 to allow wrapping.
  • Make sure the stack view has horizontal constraints so the label has a real width.
  • Use lineBreakMode = .byWordWrapping for normal multiline text behavior.
  • In horizontal stacks, tune hugging and compression resistance to let the label wrap.
  • Avoid fixed heights that conflict with the label's natural multiline size.

Course illustration
Course illustration

All Rights Reserved.