# TextOverflow

Artifact: [androidx.compose.ui:ui-text](https://developer.android.com/jetpack/androidx/releases/compose-ui) [View Source](https://cs.android.com/search?q=file:androidx/compose/ui/text/style/TextOverflow.kt+class:androidx.compose.ui.text.style.TextOverflow) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0) Common/AllAndroid/JVM
- Cmn

  ```
  value class TextOverflow
  ```

*** ** * ** ***

Specifies how to handle overflowing text.

## Summary

| ### Public companion properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#Clip()` Clips overflowing text to fit its container. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#Ellipsis()` Displays an ellipsis at the end of the line to indicate overflow. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#MiddleEllipsis()` Displays an ellipsis in the middle of the line. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#StartEllipsis()` Displays an ellipsis at the start of the line. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#Visible()` Displays all text, even if it exceeds the specified bounds. | Cmn |

| ### Public functions |
|---|---|---|
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#toString()()` | Cmn |

## Public companion properties

### Clip

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
val Clip: TextOverflow
```

Clips overflowing text to fit its container.

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0)

```
val Ellipsis: TextOverflow
```

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

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

```kotlin
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](https://developer.android.com/jetpack/androidx/releases/compose-ui#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#Clip()` for multiline text (only supported for single line or maxLines=1).

### StartEllipsis

Cmn Added in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/TextOverflow#Clip()` for multiline text (only supported for single line or maxLines=1).

### Visible

Cmn Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-ui#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`.

```kotlin
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,
    )
}
```

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