卡内的 TableCell 文本在 React 中溢出

Posted 2023-02-22

【中文标题】卡内的 TableCell 文本在 React 中溢出

【英文标题】：TableCell Texts inside Card Is Overflowing in React

【发布时间】：2021-01-11 14:48:58

【问题描述】：

我在一张桌子卡片中有一张桌子，但它的 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>

【参考方案1】：

使用word-break: break-word

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

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