两行后的材质ui文本省略号答案

【问题标题】：Material ui text ellipsis after two line两行后的材质ui文本省略号
【发布时间】：2020-08-26 07:27:38
【问题描述】：

如何在material ui中的两行之后省略文本？

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

【问题讨论】：

这能回答你的问题吗？ Limit text length to n lines using CSS
你能告诉我如何在 MUI 中做到这一点吗？

【解决方案1】：

您可以使用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>
  );
}

【讨论】：

【解决方案2】：

使用sx更新：

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

【讨论】：

为我工作！尽管 IntelliSense 没有将“-webkit-box”显示为可能的显示值...