Material ui text ellipsis after two line

Question

How can I ellipsis a text after two line in material ui?

Here https://material-ui.com/system/display/#text-overflow show for single line

Does this answer your question? [Limit text length to n lines using CSS](https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css) — bertdida, Aug 26 '20 at 08:01

score 21 · Answer 1 · edited Apr 01 '22 at 14:29

21

Update using sx:

<Typography
   sx={{
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      WebkitLineClamp: '2',
      WebkitBoxOrient: 'vertical',
   }}
>
</Typography>

edited Apr 01 '22 at 14:29

samchuang

411
5
15

answered Mar 02 '22 at 14:01

David

425
4
9

1

Worked for me! Although IntelliSense was not showing '-webkit-box' as a possible value for display... – slax57 Mar 25 '22 at 14:24
Could not get this working when added padding to text. So removed padding and it works fine. Thanks! – a909 May 26 '23 at 17:38

bertdida · Accepted Answer · 2020-08-26T08:55:17.653

You could use makeStyles function to create a multiLineEllipsis style.

import { makeStyles } from "@material-ui/core/styles";

const LINES_TO_SHOW = 2;

// src: https://stackoverflow.com/a/13924997/8062659
const useStyles = makeStyles({
  multiLineEllipsis: {
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "-webkit-box",
    "-webkit-line-clamp": LINES_TO_SHOW,
    "-webkit-box-orient": "vertical"
  }
});

Then you use this style just like as below

function App() {
  const classes = useStyles();

  return (
    <Typography className={classes.multiLineEllipsis}>
      Very long text here.
    </Typography>
  );
}

Material ui text ellipsis after two line

2 Answers2