The text doesn't get wrapped in swift UI

After spending a lot of time with an error like this, I can't be 100% certain that this is a lineLimit issue. As of writing this post, the solution I found with more complex views is the following snippet of code to prevent wrapping:

.fixedSize(horizontal: false, vertical: true)

This should prevent the interpreter from collapsing text vertically.

I hope this helps someone.

The full solution as of Xcode 11.3 / Swift 5.1 is found across multiple answers here.

The explanation for why this is happening is found in Matteo Pacini's answer: using the predefined .font(.title), .font(.headline), etc. seems to bring the behavior that these Text views will size themselves to always ellipsize rather than wrap. However, simply switching to .body doesn't seem like the best work around.

The best workaround is found in Sharpienero's answer: add .fixedSize(horizontal: false, vertical: true) to your Text view. This tells the Text view to NOT do its custom re-sizing horizontal logic of NOT ellipsizing which causes it to follow the standard rules that we're all use to.

Thanks to both of them!

Try changing the second Text's lineLimit to a number instead of nil:

VStack(alignment: .leading) {
  Text("SwiftUI is a modern way to declare user interfaces for any Apple platform. ")
    .font(.title)
    .color(.red)
    .lineLimit(nil)
  Text("Create beautiful, dynamic apps faster than ever before.")
    .font(.system(size: 20))
    .lineLimit(2)
 }.padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))

Result:

It looks like the font holds line wrapping attributes.

If you change it to body, then it wraps correctly!

For my problem, I had a setup like this:

public var body: some View {
    Form {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
            .font(.title)

        Spacer()
            .fixedSize()

        Text("""
            Integer ut orci odio. Proin cursus ut elit eget rutrum. Nunc ante sem, euismod sed purus sed, tempus elementum elit. Phasellus lobortis at arcu quis porta. Cras accumsan leo eu tempus molestie. Suspendisse vulputate diam ipsum, et tristique lorem porta et. Pellentesque sodales est id arcu luctus venenatis.

            Vestibulum non magna lorem. In tincidunt aliquet nunc, sit amet pharetra neque hendrerit id.

            Cras sed!
            """)

        NativeButton("OK", keyEquivalent: .return) { self.screen = .game }
    }
        .frame(maxWidth: 480)
        .fixedSize()
        .padding()
}

For some reason, all I had to do was add minWidth: 480, idealWidth: 480 to the frame and everything rendered correctly. I didn't expect this because I already applied .fixedSize(), so I figured one of these three should've been enough.

public var body: some View {
    Form {
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
            .font(.title)

        Spacer()
            .fixedSize()

        Text("""
            Integer ut orci odio. Proin cursus ut elit eget rutrum. Nunc ante sem, euismod sed purus sed, tempus elementum elit. Phasellus lobortis at arcu quis porta. Cras accumsan leo eu tempus molestie. Suspendisse vulputate diam ipsum, et tristique lorem porta et. Pellentesque sodales est id arcu luctus venenatis.

            Vestibulum non magna lorem. In tincidunt aliquet nunc, sit amet pharetra neque hendrerit id.

            Cras sed!
            """)

        NativeButton("OK", keyEquivalent: .return) { self.screen = .game }
    }
        .frame(minWidth: 480, idealWidth: 480, maxWidth: 480)
        .fixedSize()
        .padding()
}