React - Material UI Typography Как разбить длинную строку на несколько строк

Question

Я использую ReactJS и библиотеку компонентов под названием MaterialUI. У меня проблема с компонентом Typography.

Что происходит, если я пишу длинный текст, он превышает его контейнер и не выводит go на новой строке:

import React from "react";
import { Redirect } from "react-router";
import { withRouter } from "react-router-dom";

import Container from "@material-ui/core/Container";
import CssBaseline from "@material-ui/core/CssBaseline";
import Typography from "@material-ui/core/Typography";

function Homepage() {
  return (
    <div>
      <React.Fragment>
        <CssBaseline />
        <Container fixed>
          <Typography variant="h1" component="h2" align="center">
            123 456 789 qwertyuiopasdfghjklzxcvbnm
          </Typography>
        </Container>
      </React.Fragment>
    </div>
  );
}

export default withRouter(Homepage);

под изображением:

Это происходит в мобильном режиме, а также в режиме рабочего стола.

Знаете ли вы, как исправить это поведение? Мне бы хотелось, чтобы длинные слова были разбиты на новую строку, если была достигнута максимальная ширина контейнера.

Answer 1

word-wrap работает для material-ui Typography и относится к Как принудительно обернуть длинную строку без пробела?

wordWrap: "break-word"

<Typography
  variant="h1"
  component="h2"
  align="center"
  style={{ wordWrap: "break-word" }}
>
  123 456 789 qwertyuiopasdfghjklzxcvbnmdfsafasfasfadfaf
</Typography>

Попробуйте онлайн: