Material-ui：用省略号在 2 行中写入文本
Tur*_*rvy 5 text reactjs box material-ui
对于 reactjs 应用程序，我使用 Material-ui ( https://material-ui.com/ ) 进行设计。而且我需要在卡片中写入与 2 行完全匹配的文本。
当文本可以包含在 2 或 1 行中时，我已经完成的工作，但对于较长的文本，剪切变为单词之前，而不是省略号。
这是我所做的
<Box
fontSize="h5.fontSize"
component="div"
overflow="hidden"
textOverflow="ellipsis"
height={70}
>
{title}
</Box>
在第一张牌上的结果是好的，因为在第二张牌上，最后一个单词“Floooooo”显示在隐藏部分（第三行）中，但没有显示在带有省略号的第二行中。我尝试添加 whiteSpace="nowrap" 但文本只有 1 行高（图 2）
你能帮我吗？
Mad*_*eka 26
<Typography
sx={{
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
}}>
overflowing text...
</Typography>
笔记
“sx”是适用于较新版本的 MUI 的属性
-webkit-line-clamp: 2您可以结合使用 CSS 规则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>| 归档时间： |
|
| 查看次数： |
3029 次 |
| 最近记录： |