React - Material UI Typography 如何将长字符串分解为多行

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-UI 的排版。

wordWrap: "break-word"

Ref: QA: 将长字符串包裹起来，不带任何空格

演示

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

在线试一下：