React-長い文字列を複数行に分割するマテリアルUIタイポグラフィ

Question

ReactJSとMaterialUIというコンポーネントライブラリを使用しています。タイポグラフィコンポーネントに問題があります。

何が起こるかというと、私が長いテキストを書くと、そのコンテナを超えて新しい行に行かないことです。

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-uiTypography、および参照 空白なしの長い文字列を強制的にラップするにはどうすればよいですか？

wordWrap: "break-Word"

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

オンラインでお試しください：