В документации к Material-UI, в разделе Сетка: пробел: 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>!