两行后的材料 ui 文本省略号

Question

如何在材料 ui 中的两行后省略文本？

这里https://material-ui.com/system/display/#text-overflow显示单行

Answer 1

更新使用sx：

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

Answer 2

您可以使用makeStyles函数来创建multiLineEllipsis样式。

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

然后你像下面一样使用这种风格

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

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