🔋 Avoid Text Truncation in SwiftUI

TL;DR: In SwiftUI, avoid text truncation by using fixedSize to bypass layout constraints, minimumScaleFactor to scale text, ViewThatFits for adaptive layout, or ScrollView for large content. Each method addresses specific UI needs, ensuring complete text display.

Problem

In SwiftUI, when a view lacks sufficient space to display Text content, the system truncates the text by default. How can you ensure that Text content is fully displayed in such cases?

Cause

Text is an adaptive component that adjusts its display based on the size constraints of its parent view. When the parent view provides insufficient space, Text prioritizes truncation instead of line wrapping or scaling.

Solutions

1. Use the fixedSize Modifier

The fixedSize modifier allows Text to ignore parent view constraints along specific axes, ensuring enough space to fully display the content.

Text("This is a very long text that might be truncated.")
    .fixedSize() // Ignores both horizontal and vertical constraints

Text("This is a very long text that might be truncated.")
    .fixedSize(horizontal: true, vertical: false) // Ignores horizontal constraints only

Text("This is a very long text that might be truncated.")
    .fixedSize(horizontal: false, vertical: true) // Ignores vertical constraints only

• With .fixedSize(horizontal: true, vertical: false), Text will fully display its content horizontally (even if it overflows the screen).
• With .fixedSize(horizontal: false, vertical: true), Text wraps onto multiple lines to display all content.

2. Use minimumScaleFactor to Scale Down Font Size

The minimumScaleFactor modifier allows Text to shrink its font size automatically when space is limited, instead of truncating the content.

Text("This is a very long text that might be truncated.")
    .lineLimit(1) // Limit to a single line
    .minimumScaleFactor(0.5) // Minimum font scale factor is 50%
    .frame(width: 200)

This method is suitable for scenarios where content needs to fit within a single line, and reducing font size is acceptable.

3. Use ViewThatFits

ViewThatFits provides a flexible way to choose the most suitable child view based on the available space, ensuring the content is displayed in full.

struct TextDemo: View {
    @State private var width: CGFloat = 100

    var body: some View {
        VStack {
            Slider(value: $width, in: 50...300)
                .padding()
            ViewThatFits {
                Text("This is a very long text that might be truncated.")
                Text("This is a long text.")
                Text("Short text.")
            }
            .frame(width: width)
            .border(.red)
        }
    }
}

When the parent view’s space is insufficient, ViewThatFits selects the child view that fits the available space.

4. Use a Scrollable Container (ScrollView)

For large amounts of text in limited space, place the Text in a scrollable container like ScrollView or List, allowing users to scroll through the content.

ScrollView {
    Text("This is a very long text that might be truncated.")
}

Further Reading

• Mastering ViewThatFits
• Understanding fixedSize

With these methods, you can choose the most appropriate solution to ensure that Text content is fully displayed based on the specific requirements of your SwiftUI app.