Material-UI:长文本包装在网格中

问题描述 投票:0回答:1

在Material-UI的文档中,在Grid: white-space: nowrap;部分中,存在一个以codesandbox包装的文本的示例。

在此示例中,我用长的空格代替const message =""

const message ="AsuperLongTextWithNoSpaceItIsVeryAnnoyingIWantToWrapThisSentence"

结果:

enter image description here

您可以看到该消息超出了网格。我希望消息能换行。

我试图这样添加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>

结果:

enter image description here

您可以看到它更好,但是文本也超出了网格。

如何正确执行此操作而不要通过网格?

EDIT

我在网格中有一个网格:

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

我的containerwrap="nowrap",我的项目有zeroMinWidth,但结果是:

enter image description here

代替此:

enter image description here

reactjs grid material-ui
1个回答
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>

Long text not overflowing container

© www.soinside.com 2019 - 2024. All rights reserved.