In the docs of Material-UI, in the section Grid: white-space: nowrap; there is an exemple of the text wrapped in codesandbox.
In this exemple I replace const message ="" by a long text without space:
const message ="AsuperLongTextWithNoSpaceItIsVeryAnnoyingIWantToWrapThisSentence"
The result:
As you can see the message exceeds the grid. I want that the message wraps the line.
I tried to add style={{'overflowWrap': 'break-word'}} like this:
<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>
The result:
As you can see it's better, but the text exceeds the grid too.
How to do this correctly without going over the grid?
EDIT (1)
I have a grid in a grid:
<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>
My container has wrap="nowrap", my item has zeroMinWidth, but the result is:
Instead of this:
EDIT (2)
I found the solution:
It must to write zeroMinWidth for each <Grid item> !
