How to show ellipsis (three dots) at the end of a Text line in Android Jetpack Compose?

Both BasicText and Text have overflow and maxLines arguments which can help you.

Text(myText, maxLines = 1, overflow = TextOverflow.Ellipsis)

Here’s a full single-line example:

import androidx.compose.material.Text
import androidx.compose.ui.text.style.TextOverflow

@Composable
fun EllipsisExample() {
    Box(modifier = Modifier.width(160.dp)) {
        Text(
            text = "Lorem ipsum dolor sit amet.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

enter image description here

Of course you can tune maxLines to fit your needs:

Text(
    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)