SwiftUI Text Truncated in HStack: Causes & Fix

The Problem

When placing a Text view inside an HStack, you may notice that the text gets truncated or cut off unexpectedly:

// ❌ Wrong
HStack {
    Text("This is a very long text that should not be truncated")
    Spacer()
}

The text appears cut off, even though there is a Spacer() to push it to one side.

Root Cause

In SwiftUI, HStack tries to size its children based on available space. However, Text views inside HStack have a default behavior where they may truncate if they cannot determine a fixed width constraint. This often happens when the Text is not explicitly told to expand, and the parent HStack doesn't enforce a layout that allows the text to take available space.

Additionally, SwiftUI's layout engine prioritizes fixed-size content in HStack, and without explicit constraints, Text might be clipped or truncated to fit.

The Fix

To fix this, use .fixedSize(horizontal: false, vertical: true) on the Text view to allow it to expand horizontally while keeping vertical constraints:

// ✅ Fixed
HStack {
    Text("This is a very long text that should not be truncated")
        .fixedSize(horizontal: false, vertical: true)
    Spacer()
}

This tells SwiftUI that the Text can grow horizontally to fill available space, preventing truncation.

Alternative Approaches

Use VStack inside HStack: Wrap the Text in a VStack to allow it to take more space:

HStack {
    VStack {
        Text("This is a very long text that should not be truncated")
    }
    Spacer()
}

Set explicit frame on Text: You can also define a minimum width or dynamic frame to ensure the text has enough space:

HStack {
    Text("This is a very long text that should not be truncated")
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    Spacer()
}

Affected iOS Versions

This behavior is present in iOS 13 through iOS 17. While SwiftUI's layout engine has improved over time, this specific truncation behavior persists unless explicitly addressed using layout modifiers like .fixedSize or .frame.