How to fix truncated text in SwiftUI

If you're like me, then you rely heavily on SwiftUI previews to check if the UI you're building looks good.

I get it, it's faster, you don't have to keep running your app and go through several different screens to get to where you want.

Using SwiftUI preview works 99% of the time, the problem starts when it doesn't show the problems you might see when you run the app on a device.

The Problem

Recently I came across one of those such problems.

Here's what I mean when the text truncated:

This wasn't detected by Xcode Preview because it's more forgiving than running the app. That's why I didn't see it when I used the Preview, but saw it when I ran the app.

Here's the code (you can also check the code + the fix on GitHub, check the links below).

        Image("coding-with-vera-logo")
          .resizable()
          .scaledToFit()
          .frame(width: 200, height: 200)
          .foregroundColor(.secondary)
        
        Spacer()
        
        VStack {
          Text("Lorem ipsum dolor sit amet")
            .font(.title)
            .padding(.horizontal, 32)
            .lineLimit(0)

            ...
          

The code seems fine, right?

I used .lineLimit(0) because I don't want to limit the text itself.

But according to Apple:

Sets the maximum number of lines that text can occupy in this view. If nil, no line limit applies. [1]

• 0 means zero lines.
• nil means unlimited lines.

The Solution

If you're also experiencing this issue, here's how you can fix it:

        VStack {
          Text("Lorem ipsum dolor sit amet")
            .font(.title)
            .padding(.horizontal, 32)
            .lineLimit(nil) // Add this line
            ...

This way you can have unlimited lines for the text that is breaking.

If the issue is still not fixed ❌

If this does not fix your issue, try adding the modifier for fixedSize. According to Apple:

During the layout of the view hierarchy, each view proposes a size to each child view it contains. If the child view doesn’t need a fixed size it can accept and conform to the size offered by the parent [2].

        VStack {
          Text("Lorem ipsum dolor sit amet")
            .font(.title)
            .padding(.horizontal, 32)
            .lineLimit(nil)
            .fixedSize(horizontal: false, vertical: true) // Add this line

By adding this modifier you're explicitly telling that you don't want the width of the text to be fixed but you want to height of the view to be of fixed size.

Be careful with ⚠️

Check if you have minimumScaleFactor on the text that you're having trouble with, fixed size and minimum scale factor might be incompatible.

If the issue is still not fixed ❌

Try adding .layoutPriority(1), this will give more space to your text making it not break.

A parent layout offers the child views with the highest layout priority all the space offered to the parent minus the minimum space required for all its lower-priority children [3].

        VStack {
          Text("Lorem ipsum dolor sit amet")
            .font(.title)
            .padding(.horizontal, 32)
            .lineLimit(nil)
            .fixedSize(horizontal: false, vertical: true) 
            .layoutPriority(1) // Add this line

And that's it, this should fix the issue.

Conclusion

Be careful when adding lineLimit(0) to text on your SwiftUI views. When you don't want to limit the number of lines of a text you should use nil instead of 0.

Take a look at the full gist for the code used in this article here[3].

About Coding With Vera

If this article helped you, consider reading more articles of mine.

I cover Swift and iOS Development topics. If you have a topic in mind that you would like to be covered by me, e-mail me with your idea to [email protected].

Thank you.

References

[1] Line limit: Apple Developer Documentation

[2] Fixed Size: Apple Developer Documentation

[3] Layout Priority: Apple Developer Documentation

[4] Gist: Fix line limit SwiftUI