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 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

val ClipTextOverflow

Clip the overflowing text to fix its container.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text

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

Ellipsis

val EllipsisTextOverflow

Use an ellipsis to indicate that the text has overflowed.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text

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

Visible

val VisibleTextOverflow

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

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

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

open fun toString(): String