Android Jetpack Compose – Text Overflow

Android Jetpack Compose – Text Overflow

To set overflow for text in Text composable in Android Jetpack Compose, you can set the overflow parameter of the Text composable with required TextOverflow (androidx.compose.ui.text.style.TextOverflow) value.

The following are some of the allowed values.

• TextOverflow.Ellipsis
• TextOverflow.Visible
• TextOverflow.Clip

Example

In the following example, we have set the overflow parameter of the Text composable to Ellipsis.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.sp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Text(
                        text = "Hello Android\nThis is sample text\nAnd another line",
                        fontSize = 25.sp,
                        maxLines = 2,
                        overflow = TextOverflow.Ellipsis
                    )
                }
            }
        }
    }
}

Screenshot

Summary

In this tutorial, we have seen how to set overflow for Text composable in Android Jetpack Compose, using overflow parameter of Text composable.