https://kotlinlang.org logo
#compose
Title
# compose
l

Luke

06/02/2022, 7:53 PM
I have an issue with
Text
that I think might be a bug in the framework. Basically, when I put a
height(x.dp)
modifier on a
Text
, but the text is too long, the last line appears outside the bounds of
Text
. More in thread.
👀 1
I created a new project to test this. In the
Activity
, the UI looks like this:
Copy code
Column(
    modifier = Modifier.fillMaxSize()
) {
    Text(
        text = "Super long lorem ipsum",
        fontSize = 24.sp,
        modifier = Modifier.fillMaxWidth()
            .height(96.dp)
            .background(Color.Red),
        overflow = TextOverflow.Ellipsis,
    )
    Text(
        text = "Some other text",
        modifier = Modifier.fillMaxWidth(),
        overflow = TextOverflow.Ellipsis,
    )
}
The result is this:
I don't understand why both text are overlapping...
I am using version 1.1.1
I would think the text would have cut to 'sagittis', followed by the ellipsis, but now there isn't even the ellipsis...
It looks fixed in 1.2.0-beta03
l

Landry Norris

06/02/2022, 8:50 PM
Try clipToBounds?
I know that when working with a Canvas, you can draw outside the bounds by default. You have to add clipToBounds to make it clip. Maybe they didn’t have that in the Text composable before 1.2.0-beta03?
l

Luke

06/02/2022, 8:56 PM
It does the same thing as `TextOverflow.Clip`: there is still the 4th line but it's clipped at the bottom of the composable in red...
s

Stylianos Gakis

06/02/2022, 9:49 PM
The fact that your pics have such a mildly different version of green and both names start with an L made me think you were talking to yourself 😅
l

Landry Norris

06/03/2022, 12:12 AM
It is a bit weird when I'm glancing through messages and I see a similar green color
a

Aleon Q

06/03/2022, 7:37 AM
Yeah, this is un-expected behavior, not sure if it was deliberately meant to behave as such for some reasons that I may have overlooked.
Text
with fixed height, long text and overflow mode set to
Ellipsis
behaves as if the overflow mode is set to
Visible
and ignores
Ellipsis
. Workaround for me was to use
maxLines
with
Ellipsis
. That got me the result I was expecting with ellipsis.
s

Siyamed

06/03/2022, 7:22 PM
The newest version should have ellipsize by height (which is the expectation here). If a max height is set, and ellipsize is set, it should ellipsize.
6 Views