How to Control Text Width in iOS SwiftUI

In this blog post, we’re focusing on an essential aspect of creating visually pleasing and well-structured UIs – controlling text width in SwiftUI. The ability to manage the width of your text elements allows you to create layouts that are neat, harmonious, and effective at conveying your message.

Basics: SwiftUI Text and Width

By default, a SwiftUI Text view occupies the least amount of space required to display its content. It’s not usually necessary to explicitly set the width. When the text content cannot fit within the width of its parent view, SwiftUI automatically wraps the text to the next line.

However, there might be scenarios where you need to explicitly control the width of the text view, such as when you want to create text-based design elements or when you need specific alignment in your layout.

Fixed Width Modifier

SwiftUI provides the .frame() modifier to control the size of the text view. You can specify a fixed width like so:

Text("Hello, SwiftUI!")
    .frame(width: 200)

In this case, the Text view will have a width of 200 points, regardless of the length of the text. If the text cannot fit within 200 points, it will be wrapped onto the next line.

Minimum and Maximum Width

The .frame() modifier also allows you to set minimum and maximum width values for your Text view, giving you more flexibility:

Text("Hello, SwiftUI!")
    .frame(minWidth: 100, maxWidth: 200)

Here, the width of the Text view will be flexible between 100 and 200 points depending on the length of the text.

Width Inference in SwiftUI Stacks

In SwiftUI stacks (HStack, VStack, ZStack), the width of the text view is also influenced by the other views within the stack. By default, SwiftUI divides the space among the child views according to their needs. If you want a Text view to take up more space, you can use the .frame(maxWidth: .infinity) modifier:

HStack {
    Text("Hello, SwiftUI!")
        .frame(maxWidth: .infinity)
    Text("Let's learn!")
}

In this example, “Hello, SwiftUI!” takes up as much space as available, pushing “Let’s learn!” to the edge of the HStack.

Controlling the width of text in SwiftUI is a fundamental technique for achieving a well-structured and balanced UI. Whether you’re setting fixed widths, flexible min-max widths, or influencing width in SwiftUI stacks, these techniques are crucial to fine-tune your app’s aesthetics and usability.