Long Text inside Table Cell Overflow

Question

EDIT: I've attached a screenshot. I'd like the text to use only the available space of the grid non scrolling horizontally.

I've this table on React Material-UI library:

<TableRow>
  <TableCell component="th" scope="row">
    <Grid container wrap="nowrap" direction="row" alignItems="center">
      <Grid item>
        <img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
      </Grid>
      <Grid item xs zeroMinWidth>
        <Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
      </Grid>
    </Grid>
  </TableCell>
</TableRow>

Following this tutorial: https://material-ui.com/components/grid/#white-space-nowrap, I'd like to avoid long text wrapping fulfilling the available space and then ellipsizing. Problem is that the text is overflowing x-axis and scroll bars appear. What am I doing wrong? Many thanks in advance.

I did not understand the desired behavior, you don't want the text to stack sentences over the other, creating an ellipse, but you don't want a horizontal scroll bar either? You want to truncate the text? — Pedro Vieira, Jun 12 '19 at 17:45
Sorry, I've edited the question. I want the text to stay inside the page width, not scrolling horizontally. — Jumpa, Jun 12 '19 at 18:18
In the dupe link, this answer might be useful: https://stackoverflow.com/a/11004369/2827823 ... also check the question itself, it shows what more is needed. — Asons, Jun 12 '19 at 19:01

score 3 · Answer 1 · answered Jun 12 '19 at 18:51

I made an example on stackblitz.

The problem is that you are using Tables and that is messing up with the Grid style, I tried to identify where to change the style but with no success. Of course it worked with a inline style like style={{maxWidth:"number_in_pixels"}}, but you application would not be responsive.

What I did in the example was remove the Table, and it work like intended:

function YourComponent() {
  return (
    <Grid container wrap="nowrap" direction="row" alignItems="center">
      <Grid item>
        <img src="https://images-eu.ssl-images-amazon.com/images/I/41pGDPBowuL._SL75_.jpg" alt="NZXT h200i" />
      </Grid>
      <Grid item xs zeroMinWidth>
        <Typography noWrap>This is a very long text to try the x overflow on the table cell that is not working as expected. Can you help me with this?</Typography>
      </Grid>
    </Grid>
  );
}

If you really need to organize in a list kind of way, I would suggest using a simple list, I used once with cards and it did not messed up the style for me. Or even use pure Grid or Flex Boxes

Long Text inside Table Cell Overflow

1 Answers1