Adding unlimited lines in a Text (SwiftUI)

Viewed 29811

Just figuring out how I can achieve multiple lines of text in a Text. It seems like the Text has the same default as UILabel (one line), but I can't find any function which meets this criteria.

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text("Avocado Toast").font(.system(size: 24))
            }
            // This Text does cut, and I wonder how I can achieve multiple rows
            Text("Ingredients: Avocado, Almond Butter, Bread")
                .font(.system(size: 20))

        }
    }
}

Edit

.lineLimit(X), did the trick. But is it possible to not set a specific amount, for instance. With just a 0?

8 Answers

For wrapping Text in a Form .lineLimit(Int.max) did not work for me. It seems there needs to be some width for it to know when to wrap. I believe the official way is with .fixedSize:

Text(message)
    .fixedSize(horizontal: false, vertical: true)

The documentation states:

This example shows the effect of fixedSize(horizontal:vertical:) on a text view that is wider than its parent, preserving the ideal, untruncated width of the text view.

https://developer.apple.com/documentation/swiftui/view/fixedsize(horizontal:vertical:)

Use .lineLimit() to limit the amount of lines of text. It takes an optional Int (Int?) as an argument, and .lineLimit(nil) allows unlimited lines.

Edit: As of SwiftUI Beta 5, Text has a default line limit of nil, so text in Text will wrap by default.

Text("Professional Burnout and how to overcome it")
     .font(.callout)
     .fixedSize(horizontal: false, vertical: true)
     .frame(width: 220)

text wrap to next line

lineLimit and fixedSize work together.

Setting .fixedSize with (horizontal: false, vertical: true) will allow the Text to grow.

Setting lineLimit determines up to how many lines the Text will grow to

  • a nil value is no limit
    • lineLimit(nil) doesn't seem to be necessary in conjunction with .fixedSize as .fixedSize alone will allow the label to grow as far as it can.

Example:

Text("Using `___VARIABLE_\(identifier): identifier___` in your template will replace that macro with `\(defaultValue)`")
    .fixedSize(horizontal: false, vertical: true)
    .lineLimit(2)

lineLimit(2)

lineLimit(1)

lineLimit(1)

I had to add 2 different modifiers for it to work:

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra neque ex, at consectetur leo semper eu. Ut finibus maximus ex et maximus. Proin vel sagittis sapien, sed tincidunt orci.")
    .frame(maxWidth: .infinity, alignment: .leading)
    .fixedSize(horizontal: false, vertical: true)

If you don't add the frame, it will have your text out of the bounds of the screen, and fixedSize allows it to have multiple lines visible

If lineLimit(nil) is not working for you, try setting layoutPriority manually to whatever it suits you .layoutPriority(0.5)

None of the previous answers worked for me, but .lineLimit(Int.max) did the trick.

Related