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

标签： reactjsgridmaterial-ui

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>