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?
CodePudding user response:
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)
}