卡片中的 TableCell 文本在 React 中溢出

Question

我在一张桌子卡片里有一张桌子，我在它的 TableCell 上有问题。 如果这个词太长，它就会横向溢出。 我如何将它打破到下一行？ 请看那里的“代码”，因为它溢出了

请在此处查看我的代码和框，请单击此处

        <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>

Answer 1

使用word-break: break-word

const useStyles = makeStyles({
  wrapTableCell: {
    wordBreak: "break-word"
  }
});

<TableCell
  classes={{ root: classes.wrapTableCell }}
  variant="body"
>
  {order.code}
</TableCell>