TextOverflow

Specifies how to handle overflowing text.

Summary

Public companion properties
TextOverflow

Clips overflowing text to fit its container.
Cmn
TextOverflow

Displays an ellipsis at the end of the line to indicate overflow.
Cmn
TextOverflow

Displays an ellipsis in the middle of the line.
Cmn
TextOverflow

Displays an ellipsis at the start of the line.
Cmn
TextOverflow

Displays all text, even if it exceeds the specified bounds.
Cmn

Public functions
open String
Cmn

Public companion properties

Clip

Cmn
Added in 1.0.0
val Clip: TextOverflow

Clips overflowing text to fit its container.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.material3.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

Displays an ellipsis at the end of the line to indicate overflow.

For example, "This is a ...".

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.width
import androidx.compose.material3.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

Displays an ellipsis in the middle of the line.

For example, "This ... text".

Note: On Android, this falls back to Clip for multiline text (only supported for single line or maxLines=1).

StartEllipsis

Cmn
Added in 1.8.0
val StartEllipsis: TextOverflow

Displays an ellipsis at the start of the line.

For example, "... is a text".

Note: On Android, this falls back to Clip for multiline text (only supported for single line or maxLines=1).

Visible

Cmn
Added in 1.0.0
val Visible: TextOverflow

Displays all text, even if it exceeds the specified bounds.

Text may render outside the composable bounds. To allow the container to expand with the text, use modifiers like Modifier.heightIn or Modifier.widthIn.

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.material3.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,
    )
}
 
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.material3.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 expanding past its bounds may still be clipped by modifiers like Modifier.clipToBounds.

Public functions

toString

Cmn 
open fun toString(): String