SwiftUI - Text on Image - Multiline Issue

App Development
1

Hello,

If you don’t mind answering, I have a small issue - whenever I place a multiline (text that need wrapping to show on screen, no matter what style it is) on an image (as ZStack, because I need the text on image), the text loses its multi line wrapping and starts to show ellipsis (…)

To prove it, I created a separate view for image and text and in main view, ZStack them. I can preview the TextView in its on previewing that it’s perfectly wrapped to new line. However I can see that it’s trimmed with ellipsis in the main view preview and is the same on the build.

Can you please help me fix it?

2

It would help if we could see some code.

1 Like
3

Absolutely - my bad. Please find it below:

The TextView Code:

import SwiftUI

struct TextView: View
{
    var body: some View
    {
        VStack(alignment: .leading)
        {

            Text("This is a multi-line text and is expected to come wrapped on the image..")
                .font(.callout)
                .lineLimit(nil)
                .padding(20)
                .foregroundColor(.white)
                .background(Color.black)
                .opacity(0.8)
                .cornerRadius(10.0)
                .padding(20)
        }
    }
}

The above code shows:

Now the ImageView Code:

import SwiftUI

struct ImageView: View
{
    var body: some View
    {
       Image("toast")
       .brightness(-0.25)
    }
}

struct ImageView_Previews: PreviewProvider
{
    static var previews: some View
    {
        ImageView()
    }
}

This one comes out as:

Finally, the main ContentView code where I call the above two is:

import SwiftUI

struct ContentView: View
{
    var body: some View
    {
        ZStack
        {
            ImageView()
            TextView()
        }
    }
}

struct ContentView_Previews: PreviewProvider
{
    static var previews: some View
    {
        ContentView()
    }
}

But the output comes like this:

As you can see its one liner. Not sure why… I tried putting it in with / without VStack / HStack in the TextView - but no difference.

I am not being allowed to put image in post - so removing them… Not sure how else can I show you the preview. - it says ‘Sorry, new users are not allowed to put image in the post.’ - I joined today only.

Any help would be greatly appreciated.

4

You might need to add the modifier .layoutPriority(1) to the Text object in TextView.

5

That WORKED! Thank you Chris… Legend. :slight_smile: Have a wonderful day… Stay safe.

1 Like