TextOverflow

How overflowing text should be handled.

Summary

Public companion properties
TextOverflow

Clip the overflowing text to fix its container.
Cmn
TextOverflow

Use an ellipsis at the end of the string to indicate that the text has overflowed.
Cmn
TextOverflow

Use an ellipsis in the middle of the string to indicate that the text has overflowed.
Cmn
TextOverflow

Use an ellipsis at the start of the string to indicate that the text has overflowed.
Cmn
TextOverflow

Display all text, even if there is not enough space in the specified bounds.
Cmn

Public functions
open String
Cmn

Public companion properties

Clip

Cmn
Added in 1.0.0
val Clip: TextOverflow

Clip the overflowing text to fix its container.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text(
    text = "Hello ".repeat(2),
    modifier = Modifier.size(100.dp, 70.dp).background(Color.Cyan),
    fontSize = 35.sp,
    overflow = TextOverflow.Clip,
)

Ellipsis

Cmn
Added in 1.0.0
val Ellipsis: TextOverflow

Use an ellipsis at the end of the string to indicate that the text has overflowed.

For example, This is a ....

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Text(
    text = "Hello ".repeat(2),
    modifier = Modifier.width(100.dp).background(Color.Cyan),
    fontSize = 35.sp,
    overflow = TextOverflow.Ellipsis,
    maxLines = 1,
)

MiddleEllipsis

Cmn
Added in 1.8.0
val MiddleEllipsis: TextOverflow

Use an ellipsis in the middle of the string to indicate that the text has overflowed.

For example, This ... text.

Note that not all platforms support the ellipsis in the middle. For example, on Android the middle ellipsis is only available for a single line text (i.e. when either a soft wrap is disabled or a maximum number of lines maxLines set to 1). In case of multiline text it will fallback to Clip.

StartEllipsis

Cmn
Added in 1.8.0
val StartEllipsis: TextOverflow

Use an ellipsis at the start of the string to indicate that the text has overflowed.

For example, ... is a text.

Note that not all platforms support the ellipsis at the start. For example, on Android the start ellipsis is only available for a single line text (i.e. when either a soft wrap is disabled or a maximum number of lines maxLines set to 1). In case of multiline text it will fallback to Clip.

Visible

Cmn
Added in 1.0.0
val Visible: TextOverflow

Display all text, even if there is not enough space in the specified bounds. When overflow is visible, text may be rendered outside the bounds of the composable displaying the text. This ensures that all text is displayed to the user, and is typically the right choice for most text display. It does mean that the text may visually occupy a region larger than the bounds of it's composable. This can lead to situations where text displays outside the bounds of the background and clickable on a Text composable with a fixed height and width.

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val background = remember { mutableStateOf(Color.Cyan) }
Box(modifier = Modifier.size(100.dp, 100.dp)) {
    Text(
        text = "Hello ".repeat(2),
        modifier =
            Modifier.size(100.dp, 70.dp).background(background.value).clickable {
                background.value =
                    if (background.value == Color.Cyan) {
                        Color.Gray
                    } else {
                        Color.Cyan
                    }
            },
        fontSize = 35.sp,
        overflow = TextOverflow.Visible,
    )
}

To make the background and click region expand to match the size of the text, allow it to expand vertically/horizontally using Modifier.heightIn/Modifier.widthIn or similar.

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val background = remember { mutableStateOf(Color.Cyan) }
val count = remember { mutableStateOf(1) }
Box(modifier = Modifier.size(100.dp, 100.dp)) {
    Text(
        text = "Hello".repeat(count.value),
        modifier =
            Modifier.width(100.dp)
                .heightIn(min = 70.dp)
                .background(background.value)
                .clickable {
                    background.value =
                        if (background.value == Color.Cyan) Color.Gray else Color.Cyan
                    count.value = if (count.value == 1) 2 else 1
                },
        fontSize = 35.sp,
        overflow = TextOverflow.Visible,
    )
}

Note: text that expands past its bounds using Visible may be clipped by other modifiers such as Modifier.clipToBounds.

Public functions

toString

Cmn 
open fun toString(): String