Is there anyway to automatically adjust the font size according to the length of the text to be displayed? For example, by setting the frame size. Can it reduce the font size automatically so that the width for displaying the font still the same?
var body: some View {
VStack {
ZStack {
GeometryReader { g in
ZStack {
ScrollView(.vertical, showsIndicators: true, content: {
VStack {
ZStack {
VStack {
Image("cat")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width:g.size.width, height:g.size.height/4*3)
.clipped(antialiased:true)
.shadow(radius:25, x:0, y:0)
VStack (){
HStack {
VStack (alignment: .leading) {
HStack {
Text("XXXX").font(.title)
.font(.system(size:35)).foregroundColor(.black).shadow(radius: 5)
})
Spacer()
}
HStack {
Text("xxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxx ").font(.title2) // very long text here
Spacer()
}
}
}
}
.padding()
.frame(width:g.size.width, height:g.size.height/4*1, alignment: .top)
}
}.frame(width: g.size.width, height: g.size.height, alignment: .top)
}
.edgesIgnoringSafeArea(.all)
}
}
}
As see in my code, there is a very long text there. The text can be displayed perfectly on most of the device except iPod Touch that it will cause "xxxxxxxx xxxxxxxx xxxx ... ", "..." at the back because it is too long to be displayed. Is there anyway that it automatically, either jump to the next line, or shrink the fonts so that there will not be "..." at the back?