Create static labels with a Text view in SwiftUI

In this tutorial, we will see how to create static labels with a Text view in SwiftUI and also explore various features of the Text view, such as adjusting line limits and customizing text truncation.

SwiftUI makes it easy to create static labels using the Text view. These labels are similar to UILabel in UIKit and are perfect for displaying non-changing text content on our app’s interface.

Now, have a look at the examples below to explore various features.

Basic Text View

First of all, I will create a basic Text view with the desired text content to display static text on the screen.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Welcome to CodeSpeedy")
    }
}

The above code will display the text “Welcome to CodeSpeedy” on the screen.

Output:

Limiting Lines

By default, the Text views generally wrap across as many lines as required, but we can control the number of lines by using the lineLimit modifier to the Text view.

First of all, I will specify a long text within the Text view and see how it will display the text.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy Technology Private Limited is an information technology company that provides various services related to programming, software development, and technology tutorials.")
            .font(.title2) // Setting the font size to title2
            .padding() // Adding padding around the text
    }
}

In the above program, I have applied the font(.title2) modifier to the Text view to set the text size to title2 and the padding() modifier to add some space around the text.

These are not necessary, these are applied here only to make the text look better.

Output:

Now, I will apply the lineLimit() modifier to the Text view to limit the number of lines. We can simply pass our required number of lines as an argument within the lineLimit() modifier to achieve this.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy Technology Private Limited is an information technology company that provides various services related to programming, software development, and technology tutorials.")
            .font(.title)
            .padding()
        
            // Setting the maximum number of lines for the Text view to display to 3
            .lineLimit(3)
    }
}

In the above code, I have used .lineLimit(3) modifier to limit the number of lines displayed for the text to 3.

Here, If the text is too long (more than three lines), only the first three lines will show, and the rest will be hidden.

Output:

Line Limit Ranges

We can also use the lineLimit() modifier to specify a range of line limits instead of a specific value.

Within this modifier, by specifying both a minimum and a maximum range for the lines, we can display the text within the specified line limit range.

This only works on iOS 16 and above version.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy Technology Private Limited is an information technology company that provides various services related to programming, software development, and technology tutorials.")
            .font(.title)
            .padding()
        
            // Set the line limit of the text to be between 2 and 5 lines
            .lineLimit(2...5)
    }
}

In the above code, I have used the lineLimit() modifier with a range argument 2...5, which means the text should be limited to a minimum of 2 lines and a maximum of 5 lines.

Output:

Exact Line Limit with reservesSpace

In iOS 16, We can specify an exact line limit for a Text view using the lineLimit modifier along with the reservesSpace parameter set to true.

This is really useful when we need to make sure that the text view is sized exactly to a specified number of lines, keeping the layout neat and consistent.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("CodeSpeedy Technology Private Limited")
            .font(.title)
            .padding()
        
            // Setting a line limit of 2 with reservesSpace
            .lineLimit(2, reservesSpace: true)
    }
}

In the above program, the text is limited to 2 lines, and reservesSpace is set to true, to make sure that the view will maintain space for those 2 lines even if the content is shorter.

Output:

Customizing Truncating position of a Text

We can customize the truncating position of a text. When we set a line limit and provide text that’s too long, SwiftUI will truncate the text. We can customize the truncation of a Text using the truncationMode() modifier.

SwiftUI provides three types of truncation modes they are .head, .middle and .tail. Now, I will explore these modes in the below example.

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 60) {
            
            Text("CodeSpeedy Technology Private Limited is an information technology company")
                .font(.title)
                .lineLimit(1) // Limiting the text to 1 line
                .truncationMode(.head) // Truncating the text from the beginning
            
            Text("CodeSpeedy Technology Private Limited is an information technology company")
                .font(.title)
                .lineLimit(1)
                .truncationMode(.middle) // Truncating the text in the middle
            
            Text("CodeSpeedy Technology Private Limited is an information technology company")
                .font(.title)
                .lineLimit(1) 
                .truncationMode(.tail) // Truncating the text from the end
        }
        .padding() // Adding padding around the VStack
    }
}

In the above program, I have applied the truncationMode() modifier to each Text view the .head will truncate from the beginning, the .middle will truncate in the middle, and the .tail  will truncate from the end.

Output: