Text overflow onto new line with WrappingHStack

December 30, 2022

I’m using WrappingHStack, and I want text elements within it (on buttons, see below) to overflow onto a new line. Currently, this does not happen — it gets truncated with ... at the end.

This does not happen if the button is outside the WrappingHStack:

Outside of WrappingHStack, text correctly overflows onto new line:

Button(action: {
    //
}) {
    VStack {
        Text("A very long sentence. Hopefully it will flow onto the next line")
            .font(.system(size: 18, weight: .bold, design: .rounded))
            .foregroundColor(.white)
    }
    .frame(alignment: .leading)
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 6)
            .fill(colours[0])
    )
    .padding(5)
}
.padding(.bottom, 10)

Inside WrappingHStack, it doesn’t:

WrappingHStack(0..<sentences.count, id:\.self, alignment: .center) { i in
    
    Button(action: {
        //
    }) {
        VStack {
            Text("A very long sentence. Hopefully it will flow onto the next line")
                .font(.system(size: 18, weight: .bold, design: .rounded))
                .foregroundColor(.white)
        }
        .frame(alignment: .leading)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 6)
                .fill(colours[i])
        )
        .padding(5)
    }
    .padding(.bottom, 10)
    
}

How can I ensure text overflows in the WrappingHStack too?

>Solution :

Try the below answer:

add .fixedSize(horizontal: false, vertical: true)

VStack {
    Text("A very long sentence. Hopefully it will flow onto the next line")
        .font(.system(size: 18, weight: .bold, design: .rounded))
        .foregroundColor(.white)
        .fixedSize(horizontal: false, vertical: true)
}