React Material UI Typography Max Number of Lines

user_5203853 0
Viewed 3584

I have a pretty simple problem; limit the number of lines. Of a long text, I don't want to show more than 3 lines. I tried the following but doesn't work:

<Typography
    sx={{
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        WebkitLineClamp: 3,
        WebkitBoxOrient: 'vertical',
    }}
    variant="body1">
    {longText}
</Typography>
reactjs css
1 Answers

I got it working like the this:

<Typography
    sx={{
        display: '-webkit-box',
        overflow: 'hidden',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: 3,
    }}
    variant="body1">
    {longText}
</Typography>

Open for better suggestions.

user_52038530
Related