The weird cases of text ellipsis

While working on a SwiftUI app I had to design views that hold more than a few lines of text inside a VStack. As I had almost no issues with layouting so far I expected the Text to grow as expected, but in some cases (but not others) the text was cut off at the end:

The view used to render this part of the UI is written like this:

struct MissionView: View {
  var mission: Mission
  var body: some View {
    VStack(alignment: .leading) {
        .font(.system(.headline, design: .rounded))
        .padding(.bottom, 8)

At first glance it seems the Text element has an implicit lineLimit. So I added a .lineLimit(.max). But that didn’t change the outcome.

After some digging I found out about .fixedSize(horizontal: Bool, vertical: Bool). This allows us to fix the size of the Text element in only one direction – vertical in our case.
After adding .fixedSize(horizontal: false, vertical: true) the text is not cut off and behaves as intended.

Image showing fixed version with now cut off

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.