Support ellipsize based on vertical space

[matteopole]

Describe the bug Setting overflow = TextOverflow.Ellipsis for a Text composable does not display the ellipsis on IOS when the text is truncated.

Affected platforms Select one of the platforms below:

• iOS

Versions

• Kotlin version*: 1.9.21
• Compose Multiplatform version*: 1.5.11
• OS version(s)* (required for Desktop and iOS issues): iOS 17.0

To Reproduce

@Composable
fun App() {
    Box(modifier = Modifier.width(100.dp).height(20.dp)) {
        Text(
            text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
            overflow = TextOverflow.Ellipsis
        )
    }
}

Expected behavior Displayed ellipsis when the text is truncated, e.g. "Lorem ipsum..."

Instead only the truncated text is shown, e.g. "Lorem ipsum"

Screenshots iOS

Android

Additional context Printing some debug info, I saw that the getLineEnd also returns the wrong character:

@Composable
fun App() {
    Box(modifier = Modifier.width(100.dp).height(20.dp)) {
        Text(
            text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
            overflow = TextOverflow.Ellipsis,
            onTextLayout = { textLayoutResult ->
                val lastLineIndex = textLayoutResult.lineCount - 1
                val lastCharacterIndex = textLayoutResult.getLineEnd(lastLineIndex, visibleEnd = true)
                println("Layout result has overflow: ${textLayoutResult.hasVisualOverflow}")
                println("Layout result last line index: ${lastLineIndex}")
                println("Layout result last character index: ${lastCharacterIndex}")
            },
        )
    }
}

Log result: Layout result has overflow: true Layout result last line index: 3 Layout result last character index: 55

[MatkovIvan]

Does maxLines = 1 parameter solve your problem?

[matteopole]

Yes specifying maxLines makes it so that the Ellipsis is shown also on iOS.

However in my actual use-case I want as many lines to be rendered as they fit. So I don't know how to leverage that workaround.

Thanks!

On Thu, Jan 11, 2024, 9:45 AM Ivan Matkov @.***> wrote:

Does maxLines = 1 parameter solve your problem?

— Reply to this email directly, view it on GitHub https://github.com/JetBrains/compose-multiplatform/issues/4116#issuecomment-1886635406, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBIJ4MNX54VQQD6RM72D6WLYN6RDTAVCNFSM6AAAAABBVNJC4SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQOBWGYZTKNBQGY . You are receiving this because you authored the thread.Message ID: @.***>

[MatkovIvan]

It's not "a bug" but unimplemented additional behavior that exists on Android. The current workaround is to specify maxLines (any specific value, not necessary "1") manually.

See https://github.com/JetBrains/compose-multiplatform-core/blob/66fe4ba80e55f5e2f455a3dd35e1c8bcac9c51eb/compose/ui/ui-text/src/androidMain/kotlin/androidx/compose/ui/text/AndroidParagraph.android.kt#L175-L199

[matteopole]

Thank you for taking a look and the prompt reply!

Do you have an idea how I could apply the workaround if the number of lines is not fixed a priori? For example is there a way I could query something like numberOfLinesThatFitMaxHeight from the Text composable?

[MatkovIvan]

I'd start with just height / heightOfLine formula

[dhakehurst]

TextLayoutResult.getLineEnd seems to return the wrong value for Javascript/Browser platform also.

setting maxLines does not seem to help

Is it related to maybe a bug in the workaround !

  MultiParagraph.getLineEnd
    Paragraph.getLineEnd
      SkiaParagraph.getLineEnd
        ....
        // workarounds for https://bugs.chromium.org/p/skia/issues/detail?id=11321 :(
        // we are waiting for fixes
        ...    

[okushnikov]

Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.