在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>
结果:
您可以看到它更好,但是文本也超出了网格。
如何正确执行此操作而不要通过网格?
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>
我的container
有wrap="nowrap"
,我的项目有zeroMinWidth
,但结果是:
代替此: