Create a Multiline Text View in SwiftUI

Written by Team Kodeco

When you’re creating user interfaces, it’s often necessary to add text that takes up more than one line. In SwiftUI, you can create a multiline text view by using a Text view and the newline escape character, \n.

Say you want to display a long message that includes multiple paragraphs. You can create a multiline text view like so:

struct ContentView: View {
  var body: some View {
    Text("Hello!\nWelcome to our app. We're so glad you're here. \n\nYou will love everything we have to offer.")
  }
}

In the example above, we create the text “Hello! Welcome to our app. We’re so glad you’re here. You will love everything we have to offer.” with two line breaks in between the second and third sentences.

The \n escape character indicates a line break in the text. When SwiftUI sees \n, it automatically starts a new line in the Text view.

You can also use string interpolation with a multiline text view. Here’s an example:

struct ContentView: View {
  var body: some View {
    let name = "Sarah"
    let message = "Hello, \(name)!\nThanks for using our app. \n\nWe hope you have a great experience."
    Text(message)
  }
}

The preview should look as follows:

In the example above, you use string interpolation to add the user’s name to the message. Then, you create a multiline text view by using the \n escape character twice.

Customizing the Display of Multiline Text

SwiftUI provides several view modifiers to customize the display of multiline text. Among these, lineLimit and multilineTextAlignment are particularly useful.

The lineLimit view modifier allows you to limit the number of lines that a Text view displays. You can also use the multilineTextAlignment view modifier to align the text within a multiline Text view. Here’s an example:

struct ContentView: View {
  var body: some View {
    Text("Why do programmers always mix up Halloween and Christmas?\nBecause Oct 31 == Dec 25!")
      .lineLimit(1)
      .multilineTextAlignment(.center)
      .padding()
  }
}

The preview should look as follows:

In this example we have a Text view that contains a programming joke spread over two lines. This text is then modified with .lineLimit(1), which restricts the text to be displayed to just one line. This results in truncation of the second line.

The .multilineTextAlignment(.center) modifier aligns the text to the center, and finally, .padding() adds some space around the Text view for better visibility.

Therefore, when running this in the preview, you’ll only see the first part of the joke: “Why do programmers always mix up Halloween and Christmas?”, while the punchline is truncated due to the .lineLimit(1) modifier.

That’s all there is to creating a multiline text view in SwiftUI! With this knowledge, you can create text views with multiple lines and customize them for your specific needs.