Text Composable with custom suffix on overflow

Question

Is there any option to change default ellipsis suffix (TextOverflow.Ellipsis) with a custom one in multiline text using Jetpack Compose?

"Long-long-long text to be ellipsized" -> "Long-long-long text to be... etc.".

Solutions using Row, alignment and two Text composables were not suitable for multiline Text. I want the suffix to be placed exactly in the end of first Text, if overflow occurs. But may be I missed something here. Anyway I will be glad for any help.

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Jul 30, 2024 at 0:51

AnumShafiq · Accepted Answer · 2024-07-29 13:02:36Z

4

Simply you can write a function using a Box container within BasixText and setting the width of your box container to set the text with your desired concatenation string.

val longText = "This is a very long text that should be truncated with a custom ellipsis if it exceeds the maximum number of lines set for this text component."
val customEllipsis = " .....[more]"
val textStyle = TextStyle(fontSize = 16.sp, fontWeight = FontWeight.Normal, color = Color.Black)

val textMeasurer = rememberTextMeasurer()
val constraints = Constraints(maxWidth = Int.MAX_VALUE)

val fullTextLayoutResult = textMeasurer.measure(
    text = AnnotatedString(longText),
    style = textStyle,
    constraints = constraints
)

val ellipsisLayoutResult = textMeasurer.measure(
    text = AnnotatedString(customEllipsis),
    style = textStyle,
    constraints = constraints
)

val maxWidth = 340.dp.dpToPx() // You can set the max width with your desired Width in dps
val textWithCustomEllipsis = if (fullTextLayoutResult.size.width > maxWidth) {
    var endIndex = longText.length
    var currentWidth = fullTextLayoutResult.size.width

    while (currentWidth + ellipsisLayoutResult.size.width > maxWidth && endIndex > 0) {
        endIndex--
        val truncatedText = longText.substring(0, endIndex)
        currentWidth = textMeasurer.measure(
            text = AnnotatedString(truncatedText),
            style = textStyle,
            constraints = constraints
        ).size.width
    }

    longText.substring(0, endIndex) + customEllipsis
} else {
    longText
}

Box(modifier = Modifier.padding(16.dp)) {
    BasicText(
        text = textWithCustomEllipsis,
        style = textStyle,
        modifier = Modifier.fillMaxWidth()
    )
}

answered Jul 29, 2024 at 13:02

AnumShafiq

3951 gold badge4 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thracian Over a year ago

This is exactly how i would have done it, upvoted. TextMeasurer is way to go to but default Constraints already have maxWidth and maxHeight as Constraints.Infinity or Int.MAX_VALUE, i don't think it's needed when you need infinite Constraints but the constraints what you should be passing might be the screen width or Composable width such as 1080 or 1240. Otherwise it doesn't calculate texts as multiline as i recall

AnumShafiq Over a year ago

As the constraint is set to the text and the text is within the box, the text becomes multi-lines with the check of a given size which is set as the name of maxWidth variable

AnumShafiq Over a year ago

I have implemented the same solution and the width that I have passed defines the constraints or the screen width in dps

Collectives™ on Stack Overflow

Text Composable with custom suffix on overflow

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related