cssreactjsmaterial-uijss

TableCell Texts inside Card Is Overflowing in React


I have a table inside a table card and i have a problem on its TableCell. If the word is too long it is overflowing horizontally. How would i break it to the next line? Pls see the "code" there because its overflowing

Pls see my codesandbox here 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>

Solution

  • Use word-break: break-word

    const useStyles = makeStyles({
      wrapTableCell: {
        wordBreak: "break-word"
      }
    });
    
    <TableCell
      classes={{ root: classes.wrapTableCell }}
      variant="body"
    >
      {order.code}
    </TableCell>
    

    Edit Card (forked)