Как исправить отрицательное поле в компонентах пользовательского интерфейса, явно с текстовым содержимым

Question

У меня проблема с абзацами в компонентах Material-UI.

У меня проблема с абзацами в компонентах Material-UI.Конкретная проблема заключается в том, что когда текст превышает размеры компонента, он не сохраняется внутри него, как показано на рисунке.

<Grid container wrap="nowrap"  css={[borde,{
                              maxWidth: 400
                        }]} >
            <Grid item xs css={beneficiosTab}  >
                <Typography 
 >asdadsdasdasdasdasdasdasdasdasdasdasdasdadasdsadasdasdasdsadasdasdsads
                </Typography>
            </Grid>
</Grid>

Я надеюсь, что на экране отображается абзац в пределах размеров.вашего контейнера

Answer 1

Попробуйте style={{wordWrap: 'break-word'}}, я надеюсь, это поможет вам. Спасибо

<Grid container wrap="nowrap"  css={[borde,{
                              maxWidth: 400
                        }]} >
            <Grid item xs css={beneficiosTab}  >
                <Typography style={{wordWrap: 'break-word'}}
 >asdadsdasdasdasdasdasdasdasdasdasdasdasdadasdsadasdasdasdsadasdasdsads
                </Typography>
            </Grid>
</Grid>