Slashes with text ellipsis overflow behaves differently than Android (Desktop)

[JetpackDuba]

When I have got a Text with slashes (like a file path) as text that doesn't fit the current screen, in the Android version of compose the string gets cut partially and not the whole word. The Desktop version cuts the whole word instead until the slash.

Desktop: "FooBar" is not shown, just the ellipsis.

Android: "Foo" is shown + Ellipsis

Code sample:

MaterialTheme {
    Text(
        text = "/Path/To/A/Fantastic/Path/Named/FooBar",
        overflow = TextOverflow.Ellipsis,
        fontSize = 23.sp,
        maxLines = 1,
    )
}

TextOverflow.Clip behaves in equally in both platform by cutting the whole word.

[JetpackDuba]

I'm testing on windows now and surprisingly it works properly there, so seems something related to the linux implementation (no idea about macOS).

Edit: Nevermind, the issue reproduces also on Windows, I did a small mistake when testing it, my apologies.

[akurasov]

Tried on MacOS. It works same way as your desktop example

[SerVB]

Also bumped to this. An example from Android: https://developer.android.com/jetpack/compose/text#text-overflow

@Composable
fun OverflowedText() {
    Text("Hello Compose ".repeat(50), maxLines = 2, overflow = TextOverflow.Ellipsis)
}

But on desktop, it seems it tends to replace the whole word by ellipsis often. I can have Compo... but after I reduce the size of the window a little, it becomes not Comp... but just .... Increasing the size makes it Compos... and Compose..., so it's not always reproduced.

[Sage-Kreiter]

Any updates on this? Seems like very strange behavior to cut off the text at a "/" or "-" on desktop.

Without overflow = TextOverflow.Ellipsis:

With overflow = TextOverflow.Ellipsis and maxLines = 1:

[dima-avdeev-jb]

@Sage-Kreiter Can you please provide code snippet to reproduce this problem?

[Sage-Kreiter]

Here is a Box with Text that overflows

    Box(
        modifier = Modifier
            .size(300.dp)
            .border(width = 1.dp, color = MaterialTheme.colors.secondaryVariant)
    ) {
        Text(
            text = "Baconipsumdolorametjowlfatbackribeyestripsteak,sirloinbiltonghamhock",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }

Here is a Box with text that overflows but contains a space as the 3rd character (same happens with "/" and "-")

    Box(
        modifier = Modifier
            .size(300.dp)
            .border(width = 1.dp, color = MaterialTheme.colors.secondaryVariant)
    ) {
        Text(
            text = "Ba onipsumdolorametjowlfatbackribeyestripsteak,sirloinbiltonghamhock",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }

Could just be that I'm missing a setting to not end on a delimeter

[MatkovIvan]

This behaviour is defined in skia, Compose itself doesn't control it. It has been already fixed in this commit - https://skia.googlesource.com/skia.git/+/0d31aa1f49cb8cfd790c44d92a9a023839524865
So, it should be fixed once we migrate to new skia version