如何设置material-ui表格单元格的固定宽度以截断内容答案

【问题标题】：how to set fixed width of material-ui table cell to truncate content如何设置material-ui表格单元格的固定宽度以截断内容
【发布时间】：2020-08-04 14:30:28
【问题描述】：

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

我试图这样做，但它不起作用。表格单元格调整到其他单元格并分配页面宽度。

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

我如何做到这一点？

【问题讨论】：

标签： material-ui

【解决方案1】：

创建一个省略号样式并将其用于您的 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>

codesandbox

【讨论】：