表格单元格溢出内的长文本[重复]答案

【问题标题】：Long Text inside Table Cell Overflow [duplicate]表格单元格溢出内的长文本[重复]
【发布时间】：2019-10-27 06:16:25
【问题描述】：

编辑：我附上了截图。我希望文本仅使用非水平滚动网格的可用空间。

我在 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 轴并出现滚动条。我究竟做错了什么？非常感谢。

【问题讨论】：

我不理解所需的行为，您不希望文本将句子堆叠在另一个之上，创建一个椭圆，但您也不想要水平滚动条吗？你想截断文本吗？
抱歉，我已经编辑了问题。我希望文本保持在页面宽度内，而不是水平滚动。
在欺骗链接中，这个答案可能有用：stackoverflow.com/a/11004369/2827823 ... 还要检查问题本身，它表明还需要什么。

标签： css reactjs material-ui

【解决方案1】：

我在stackblitz上做了一个例子。

问题是您使用的是Tables，这与网格样式混淆，我试图确定在哪里更改样式但没有成功。当然，它适用于像 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，我用过一次卡片，它并没有弄乱我的风格。甚至使用纯 Grid 或Flex Boxes

【讨论】：