While working on a SwiftUI app I had to design views that hold more than a few lines of text inside a VStack. As I had almost no issues with layouting so far I expected the Text to grow as expected, but in some cases (but not others) the text was cut off at the end:
The view used to render this part of the UI is written like this:
struct MissionView: View {
var mission: Mission
var body: some View {
VStack(alignment: .leading) {
Text(mission.name)
.font(.system(.headline, design: .rounded))
.foregroundColor(.label)
.padding(.bottom, 8)
.lineLimit(2)
Text(mission.description)
.font(.subheadline)
.foregroundColor(
.placeholderText)
}
}At first glance it seems the Text element has an implicit lineLimit. So I added a .lineLimit(.max). But that didn’t change the outcome.
After some digging I found out about .fixedSize(horizontal: Bool, vertical: Bool). This allows us to fix the size of the Text element in only one direction – vertical in our case.
After adding .fixedSize(horizontal: false, vertical: true) the text is not cut off and behaves as intended.
