javascript - React - Material UI Typography 如何将长字符串分成多行

Question

我正在使用 ReactJS 和名为 MaterialUI 的组件库。我在使用 Typography 组件时遇到问题。

发生的情况是，如果我写一个长文本，它会超出其容器并且不会换行:

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"

引用: QA: wrap long string without any blank

演示

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

在线尝试: