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

Question

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

我找到了解决方案：

一定要zeroMinWidth每一个都写<Grid item>！

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