如何解决卡内的TableCell文本在React中溢出
我在一张桌卡中有一张桌子,我在TableCell上有问题。如果单词太长,它将水平溢出。我如何将其分解到下一行?请在那里看到“代码”,因为它溢出了
请在CLICK HERE这里查看我的代码和框
<TableBody>
<TableRow>
<TableCell variant="head">Date</TableCell>
<TableCell variant="body">{order.date}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Code</TableCell>
<TableCell variant="body">{order.code}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Time</TableCell>
<TableCell variant="body">{order.time}</TableCell>
</TableRow>
<TableRow>
<TableCell variant="head">Product</TableCell>
<TableCell variant="body">{order.product}</TableCell>
</TableRow>
</TableBody>
解决方法
使用word-break: break-word
const useStyles = makeStyles({
wrapTableCell: {
wordBreak: "break-word"
}
});
<TableCell
classes={{ root: classes.wrapTableCell }}
variant="body"
>
{order.code}
</TableCell>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。