Question

编辑：我已经附上了截图。我希望文本仅使用网格的可用空间，而不是水平滚动。

我在React Material-UI库上有这张桌子：

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

在本教程之后，https://material-ui.com/components/grid/#white-space-nowrap，我想避免使用长文本换行来填充可用空间，然后省略它。问题是文本在X轴上溢出，并出现滚动条。我究竟做错了什么？预先非常感谢。

Answer 1

我在stackblitz上做了一个例子。

问题是您使用的是Tables，并且弄乱了Grid样式，我试图确定在哪里更改样式，但是没有成功。当然，它可以使用style={{maxWidth:"number_in_pixels"}}之类的内联样式，但是您的应用程序不会响应。

我在示例中所做的是删除了Table，它的工作原理与预期的一样：

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>
  );
}

如果您真的需要以列表的方式进行组织，我建议您使用simple list，我曾经与卡片一起使用过，但这并没有弄乱我的风格。甚至使用纯网格或Flex Boxes

表单元格溢出内的长文本

1 个答案: