The text doesn't get wrapped in swift UI

Question

Even After setting the .lineLimit(nil) the text doesn't get wrapped.

var body: some View {
    VStack(alignment: .center) {
        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(nil)
    }.padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
}

Remove Font and color then try direct line then it works or not >? — Yogesh Patel, Jun 08 '19 at 11:34
It seems SwiftUI doesn't want you to have a `.font(.title)` text on multiple lines. — rraphael, Jun 08 '19 at 11:38

score 315 · Accepted Answer · edited Dec 23 '22 at 06:04

315

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.

edited Dec 23 '22 at 06:04

starball

20,030
7
43
238

answered Dec 10 '19 at 23:52

Sharpienero

3,264
2
11
7

3

This solution fixed my issue after trying lineLimit and removing Spacer() – Jaron Gao Dec 12 '19 at 15:02
1

@JaronGao This should also work with a `Spacer()`, unless I am misconstruing what you are saying. Either way, I am glad I was able to help! – Sharpienero Dec 13 '19 at 17:39
Oh, I meant this solution worked independently after trying the lineLimit fix and the "remove Spacer()" fix. – Jaron Gao Dec 13 '19 at 20:36
None of the other solutions worked for me but this one worked for me. Thanks! :) – Luke Chambers Dec 14 '19 at 01:21
What's particularly weird about this solution is that in my case the text doesn't even NEED to wrap. Before adding this the text was cropped, after it shows fine on one line – lewis Sep 28 '20 at 14:48
6

Beware though that "This can result in the view exceeding the parent's bounds, which may or may not be the effect you want." – Zsolt Nov 26 '20 at 12:31
A great tip which solved my issue in a complex view with `GeometryReader` and a `VStack` with artificial frame width 3 times the original width. But interestingly I use two times `false` `fixedSize(horizontal: false, vertical: false)` and it works... I do not understand `fixedSize`, it seems. – pd95 Nov 30 '20 at 14:07
1

On macOS this modifier resizes window. The window after that not even fits the screen :0 – Vlad Mar 21 '21 at 17:35
This also fixed the issue for me, whereas `linelimit` had no effect on either the text view or the parent view – Indiana Jul 29 '21 at 10:16
This should be the correct answer! Works like a charm! – SchmidtFx Feb 08 '22 at 10:15
I still think Apple should give a look into this. This can't be a definitive solution because when you apply it, the text overflows the parent, when the desired behavior is for the parent to grow as much as the text needs. – Tiago Peres França Aug 19 '22 at 19:21
This solution perfect worked and save my time, thanx @Sharpienero – Digvijaysinh Gida Nov 08 '22 at 06:37
As others have pointed out, this stretches the window to the max on macOS. The only other way I've found to wrap the text is to set a fixed frame height, which I'd prefer not to have. Amazing there isn't another way. – Ricky Kresslein Feb 12 '23 at 11:22
Yep this works like a charm. – Amey079 Jun 14 '23 at 15:53
Yes, works here too. I find it REALLY irritating what SwiftUI is doing here... This should be simple. – soundflix Jun 25 '23 at 15:10

awolf · Answer 2 · 2020-02-10T14:58:07.303

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!

Hey, thank you for the additional information. I do feel as if my answer is lacking, so this is a good supplemental answer. Thanks again! — Sharpienero, Feb 12 '20 at 19:09

score 31 · Answer 3 · answered Jun 08 '19 at 11:49

31

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:

answered Jun 08 '19 at 11:49

M Reza

18,350
14
66
71

It certainly works but how did reach this solution. – Let's_Create Jun 08 '19 at 11:51
@Let's_Create Text type is acting strange here! For example if you swap the two Text both having lineLimit(nil) it works as expected. Or if you remove the title font it works again. I'm really not sure about this behavior since it's still in beta phase. – M Reza Jun 08 '19 at 12:31
This does not work for me in Beta 2. The only way I could get it to work is by adding `.lineLimit(3)` to the VStack (which causes it to apply to all children). It seems like `.lineLimit(nil)` just has no effect, and `lineLimit` must be added to a parent, not the `Text` views directly – Benjamin Kindle Jun 22 '19 at 15:57
@BenjaminKindle Thanks for your workaround. It should normally work with both having `lineLimit(nil)` but it's behaving very unstable in beta phase that changing a font also fixes this! – M Reza Jun 22 '19 at 16:13
5

I tried this, and setting both to `99999`, but I see no change. – Ky - Feb 06 '20 at 23:56
Setting lineLimit(nil) was not helpful. This worked instead: `.fixedSize(horizontal: false, vertical: true)` – P. Ent Apr 22 '20 at 16:51
lineLimit seems like it is related only to the numbers of lines based on counting the embedded newlines. Multi-line text with newlines causes the matching number of lines to be used for the Text view. Once that is established, if you resize the gui (on mac for instance) you can see that the text does wrap. But the total lines of the view doesn't change. – Chris Quenelle May 17 '20 at 03:14
By using `.fixedSize(horizontal: false, vertical: true)` I was able to get the Text itself to dynamically size to multiple lines (given one long line as the string), but the parent view still assumed it was one line. So the Text view expanded beyond it's allocated space and got truncated on the edges. So far it seems consistently broken in Xcode 11.4.1. Line wrapping does not affect the surrounding geometry in any way from what I can see. – Chris Quenelle May 17 '20 at 03:24
Ooops. Now I think my problem might have been that my text was inside a List. If I do the same thing in a blank app, it works differently. – Chris Quenelle May 17 '20 at 03:33
As it turns out I didn't need the call to fixedSize. Once I moved my text out of the List view and input an HStack instead, it started resizing itself dynamically the way I wanted. I would nornally want to delete all my comments above, except I think it's important to note that the docs for lineLimit() don't really explain much. The number of lines in some cases seems dictated by the number of newlines in the string, even when lines are wrapping. – Chris Quenelle May 17 '20 at 04:05

score 13 · Answer 4 · answered Jun 08 '19 at 11:37

13

It looks like the font holds line wrapping attributes.

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

answered Jun 08 '19 at 11:37

Matteo Pacini

21,796
7
67
74

1

Okay got your point but that certainly means that font of type title can't be wrapped? – Let's_Create Jun 08 '19 at 11:40
2

@Let's_Create no one knows for sure, as it's not open source, and we don't really know what's going on under the hood. It's just a guess. – Matteo Pacini Jun 08 '19 at 11:41
1

@Let's_Create they use title fonts for navigation titles, so it makes sense that it shouldn't wrap - from a design point o f view – Matteo Pacini Jun 08 '19 at 11:43
1

Yes then it makes sense – Let's_Create Jun 08 '19 at 11:45

score 8 · Answer 5 · answered Feb 07 '20 at 00:08

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()
}

Only the first line of the first `Text` and the first few lines of the second `Text` appear

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()
}

All the text appears as intended

score 4 · Answer 6 · answered Oct 18 '19 at 06:34

SwiftUI

.lineLimit(nil) VS .lineLimit(any number)

VStack(alignment: .leading, spacing: 16.0) {
// Sets the maximum number of lines that text can occupy in the view.

      Text("SwiftUI is a user interface toolkit that lets us design apps in a declarative way. ")
      .font(.title)
      .lineLimit(3)

// But if you don't know about the the text size then Sets nil in the lineLimit.

      Text("SwiftUI is a user interface toolkit that lets us design apps in a declarative way. That's a fancy way of saying that we tell SwiftUI how we want our UI to look and work, and it figures out how to make that happen as the user interacts with it.... ")
       .font(.body)
       .lineLimit(nil)
}.padding(EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8))

setting lineLimit to nil was the solution for me. – Eman Feb 10 '23 at 22:33 — Eman, Feb 10 '23 at 22:33

score 1 · Answer 7 · answered Dec 11 '19 at 15:14

I had a situation involving a UIViewRepresentable wrapped UITextField which was presented as:

VStack {
    Text("Long enough to wrap....")
    Spacer().frame(height: 40)
    CustomTextField()
}

The Text stopped wrapping when I added the CustomTextField. Nothing I did to the Text helped. If I removed the Spacer() it wrapped just fine!!

I wound up removing the Spacer and adding a bottom padding to the Text. As far as I can tell, my CustomTextField is just fine and I cannot see why it would affect the SwiftUI layout algorithms.

score 0 · Answer 8 · answered Feb 06 '22 at 11:33

0

I just added

.padding()

to my Text instance and it worked

answered Feb 06 '22 at 11:33

J. Doe

12,159
9
60
114

Tiago Peres França · Answer 9 · 2022-08-19T21:00:42.647

The only answer that kinda worked for me was applying .fixedSize(horizontal: false, vertical: true) on the Text.

I say "kinda" because, by using .fixedSize, SwiftUI will completely ignore the size given by the parent and overflow it. If the parent has a background, the layout is ruined. If the parent has a sibling node, the text is rendered on top of it.

I really believe Apple should give us the option to have the ideal size of a Text be its multiline version instead of the one-line counterpart.

While this doesn't happen, I'm using the following monstrosity, but it works:

struct AdaptiveText: View {
  @State private var height: CGFloat?
  var text: String
  
  private func updateHeight(height: CGFloat) -> some View {
    DispatchQueue.main.async {
      self.height = height
    }
    return Color.clear
  }
  
  var body: some View {
    ZStack {
      Text(text)
        .fixedSize(horizontal: false, vertical: true)
        .background() {
          GeometryReader { geo in
            updateHeight(height: geo.size.height)
          }
        }
        .opacity(0)
      
      Text(text)
    }.frame(width: nil, height: height)
  }
}

Thanks for this, mine worked fine in Preview but on an actual device it would not wrap — user2843570, Feb 21 '23 at 17:30

score 0 · Answer 10 · answered Aug 19 '23 at 17:28

0

I've just set maxWidth to the outer ContentView — now text wraps. Didn't do anything with Text props.

  var body: some Scene {
    WindowGroup {
      ContentView().frame(maxWidth: 300)
    }
  }

answered Aug 19 '23 at 17:28

Vladimir Tolstikov

2,463
21
14

The text doesn't get wrapped in swift UI

10 Answers10

Linked