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

Answer 1

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>
  );
}

Answer 2

Update using sx:

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