reactjs 材料-ui：用省略号在两行中写入文本

relj7zay 于 2023-01-25 发布在 React

关注(0)|答案(4)|浏览(151)

对于一个reactjs应用程序，我使用Material-ui（https://material-ui.com/）进行设计，并且我需要在卡片上写两行完全匹配的文本。
当文本可以包含在2行或1行中时，我已经做的工作，但对于较长的文本，剪切变成单词之前，而不是省略号。

这是我所做的

<Box
        fontSize="h5.fontSize"
        component="div"
        overflow="hidden"
        textOverflow="ellipsis"
        height={70}
      >
        {title}
      </Box>

在第一张卡片上效果很好，因为在第二张卡片上，最后一个单词'Floooooo'显示在隐藏的部分（第三行），但没有显示在第二行的省略号中。我尝试添加whiteSpace=“nowrap”，但文本只有一行高（图2）

你能帮帮我吗？

reactjs

来源：https://stackoverflow.com/questions/64315111/material-ui-write-text-in-exactly-2-lines-with-ellipsis

4条答案

按热度按时间

6gpjuf901#

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

备注

"sx"是在较新版本的MUI中工作的属性

赞(0）回复(0）举报 2023-01-25

6qqygrtg2#

您可以将CSS规则-webkit-line-clamp: 2与word-break: break-all结合使用

const useStyles = makeStyles({
  root: {
    maxWidth: 300,
  },
  media: {
    height: 100,
  },
  customBox: {
    display: "-webkit-box",
    boxOrient: "vertical",
    lineClamp: 2,
    wordBreak: "break-all",
    overflow: "hidden"
  }
});

function App() {

  const classes = useStyles();
  const title = "pos2 test long Flooooooooooooooooooooooooooooooooooo";

  return (
    <Card className={classes.root}>
      <CardMedia
        className={classes.media}
        image="https://via.placeholder.com/300x100"
      />
      <CardContent>
        <Box
          fontSize="h5.fontSize"
          component="div"
          classes={{root: classes.customBox}}
        >
          {title}
        </Box>
      </CardContent>
    </Card>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Box, Card, CardContent, CardMedia, makeStyles } = MaterialUI;
  </script>
</body>

赞(0）回复(0）举报 2023-01-25

drnojrws3#

试着这样做：

<CardContent style={{width: "auto"}}>
          <Box
            fontSize="h5.fontSize"
            component="div" 
            overflow="hidden"            
            whiteSpace="pre-line"
            textOverflow="ellipsis"
            height={70}          
          >
            {title}
          </Box>
</CardContent>

赞(0）回复(0）举报 2023-01-25

jrcvhitl4#

对于那些希望覆盖Typography组件上的noWrap属性的用户，可以在createTheme()中执行以下操作：

const theme = createTheme({
    components: {
        MuiTypography: {
            styleOverrides: {
                noWrap: {
                    whiteSpace: "initial",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    display: "-webkit-box",
                    WebkitLineClamp: "2",
                    WebkitBoxOrient: "vertical",
                }
            }
        }
    },
    [...] //your other overrides
});

然后在代码中像往常一样使用：
<Typography noWrap>[Your overflowing text]</Typography>
更多信息请点击这里：www.example.comhttps://mui.com/material-ui/customization/theme-components/#overrides-based-on-props
如果你想要的行数是可定制的，我来到这个相当丑陋的解决方案：

const theme = createTheme({
    components: {
        MuiTypography: {
            styleOverrides: {
                noWrap(styles) {
                    return {
                        whiteSpace: "initial",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        display: "-webkit-box",
                        WebkitLineClamp: String(styles.ownerState['data-lines'] || '2'),
                        WebkitBoxOrient: "vertical",
                    }
                }
            }
        }
    },
    [...] //your other overrides
});

然后：
<Typography noWrap data-lines="3">[Your overflowing text]</Typography>

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 材料-ui：用省略号在两行中写入文本

4条答案

备注

相关问题

热门标签

最新问答