如何设置固定宽度的材料ui表单元格来截断内容

我显示了一个使用无限滚动设置的用户表。第一列包含长度不同的用户名。这使得当向下滚动以获得更多用户时，随着列表的扩展，表的大小会跳跃。因此，我想在该列上设置一个固定的宽度，并相应地截断名称列。

我试着这样做，但没用。表格单元格根据其他单元格进行调整，并分配页面宽度。

<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: '20%' }}>
<Typography noWrap>SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame</Typography>
</TableCell>
</TableRow>
</TableBody>
</Table>

我该如何做到这一点？

创建省略号样式并在Typography组件上使用。

import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
ellipsis: {
maxWidth: 200, // percentage also works
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
});

...
const classes = useStyles();
<Table>
<TableBody>
<TableRow>
<TableCell>
<Typography className={classes.ellipsis}>
SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame
</Typography>
</TableCell>
</TableRow>
</TableBody>
</Table>

代码沙箱

相关内容

最新更新

热门标签：