Material-ui：用省略号将文本精确地写在 2 行中
[英]Material-ui: write text in exactly 2 lines with ellipsis
问题描述
For a reactjs app, I use Material-ui ( https://material-ui.com/ ) for the design.
对于 reactjs 应用程序，我使用 Material-ui ( https://material-ui.com/ ) 进行设计。 And I need to write text in card that match exactly 2 lines.我需要在卡片中写出与 2 行完全匹配的文本。
What I've already done works when text can be contained in 2 or 1 lines, but for longer text, the cut becomes before word and it is not ellipsis.当文本可以包含在 2 行或 1 行中时，我已经完成的工作有效，但对于较长的文本，剪切变为单词之前，而不是省略号。
Here what I've done这是我所做的
<Box
fontSize="h5.fontSize"
component="div"
overflow="hidden"
textOverflow="ellipsis"
height={70}
>
{title}
</Box>
The result is good on the first card, for on the second one, the last word 'Floooooo' is displayed in the hidden part (the third line) but not in the second line with ellipsis.第一张卡片的结果很好，因为在第二张卡片上，最后一个单词“Floooooo”显示在隐藏部分（第三行），但第二行没有显示，带有省略号。 I've tried to add whiteSpace="nowrap" but the text is only 1 line height (fig 2)我尝试添加 whiteSpace="nowrap" 但文本只有 1 行高（图 2）
Can you help me please?你能帮我吗？
4 个解决方案
解决方案1
6 2020-10-12 10:09:32
You can use CSS rule -webkit-line-clamp: 2 in conjuction with word-break: break-all您可以将 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>
解决方案2
4 2022-05-17 19:59:09
<Typography
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
}}>
overflowing text...
</Typography>
Note笔记
'sx' is a property that works in newer version of MUI
解决方案3
2 2020-10-12 10:28:33
Try like this:试试这样：
<CardContent style={{width: "auto"}}>
<Box
fontSize="h5.fontSize"
component="div"
overflow="hidden"
whiteSpace="pre-line"
textOverflow="ellipsis"
height={70}
>
{title}
</Box>
</CardContent>
解决方案4
0 2023-01-22 19:16:16
For those who wants to override noWrap property on Typography component, you can do this in your createTheme() as follows:对于那些想要覆盖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
});
Then just use in your code as usually:然后像往常一样在您的代码中使用：
<Typography noWrap>[Your overflowing text]</Typography>
More info about this here: https://mui.com/material-ui/customization/theme-components/#overrides-based-on-props有关此的更多信息，请访问： https://mui.com/material-ui/customization/theme-components/#overrides-based-on-props
If you want the number of lines to be customizable I came to this pretty ugly solution:如果你想定制行数，我想到了这个非常难看的解决方案：
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
});
Then:然后：
<Typography noWrap data-lines="3">[Your overflowing text]</Typography>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.