Material-UI：长文本包裹在网格中答案

【问题标题】：Material-UI : Long Text Wrapped in GridMaterial-UI：长文本包裹在网格中
【发布时间】：2020-04-30 14:31:52
【问题描述】：

在 Material-UI 的文档中，Grid: white-space: nowrap; 部分有一个用codesandbox 包裹的文本示例。

在此示例中，我将const message ="" 替换为没有空格的长文本：

const message ="AsuperLongTextWithNoSpaceItIsVeryAnnoyingIWantToWrapThisSentence"

结果：

如您所见，消息超出了网格。我希望消息换行。

我尝试像这样添加style={{'overflowWrap': 'break-word'}}：

<Paper className={classes.paper}>
  <Grid container wrap="nowrap" spacing={2}>
    <Grid item>
      <Avatar>W</Avatar>
    </Grid>
    <Grid item xs>
      <Typography style={{'overflowWrap': 'break-word'}}>{message}</Typography> {/* style added */}
    </Grid>
  </Grid>
</Paper>

结果：

如您所见，它更好，但文字也超出了网格。

如何在不超过网格的情况下正确执行此操作？

编辑 (1)

我在一个网格中有一个网格：

<Grid container spacing={2}>
    <Grid item>
        <Avatar>
            <ImageIcon />
        </Avatar>
    </Grid>
    <Grid item xs={12} sm container >
        <Grid item xs container direction="column" spacing={2} wrap="nowrap">
            <Grid item xs>
                <Typography gutterBottom variant="subtitle1">
                    {`${props.comment.username}`}
                </Typography>
            </Grid>
            <Grid item xs zeroMinWidth>
                <Typography gutterBottom variant="subtitle1" style={{'overflowWrap': 'break-word'}}>
                    {props.comment.comment}
                </Typography>
            </Grid>
            <Grid item container>
                <Grid item>
                        <IconButton onClick={handleMenuClick}>
                            <ThumbUp />
                        </IconButton>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
    <Grid item>
        <IconButton onClick={handleMenuClick}>
            <MoreVertIcon />
        </IconButton>
    </Grid>
</Grid>

我的container 有wrap="nowrap"，我的项目有zeroMinWidth，但结果是：

而不是这个：

编辑 (2)

我找到了解决办法：

必须为每个<Grid item>写zeroMinWidth！

【问题讨论】：

标签： reactjs grid material-ui

【解决方案1】：

这行得通（注意zeroMinWidth）：

      <Paper className={classes.paper}>
        <Grid container wrap="nowrap" spacing={2}>
          <Grid item>
            <Avatar>W</Avatar>
          </Grid>
          <Grid item xs zeroMinWidth>
            <Typography style={{overflowWrap: 'break-word'}}>{message}</Typography>
          </Grid>
        </Grid>
      </Paper>

【讨论】：

是的，但是我想显示所有的文字，我想要一个换行符
答案已更新，只需添加overflowWrap 并保留zeroMinWidth。
谢谢，它有效，但我想把这个网格放在另一个网格中，我编辑了我的问题，你能帮我吗？
你能为此创建一个密码箱吗？如果不查看/操作 dom，很难弄清楚这些事情。

【解决方案2】：

我的问题更多是在小屏幕上使用 maxWidth。已解决 [theme.breakpoints.down('md')]: { maxWidth: 250 }。

【讨论】：