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"演示<Typography&nbsp; variant="h1"&nbsp; component="h2"&nbsp; align="center"&nbsp; style={{ wordWrap: "break-word" }}>&nbsp; 123 456 789 qwertyuiopasdfghjklzxcvbnmdfsafasfasfadfaf</Typography>

Answer 2

我遇到了这个，这是一个很好的解决方案。我最终将它全局添加到我的排版中。如果您需要这个，只需将 keikai 的答案添加到您的 createMuiTheme。//theme.jsx or theme.tsximport { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';let theme = createMuiTheme({&nbsp; overrides: {&nbsp;&nbsp; &nbsp; MuiTypography: {&nbsp;&nbsp; &nbsp; &nbsp; root: {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; wordWrap: "break-word"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp;&nbsp; }});export default theme;

Answer 3

更新 24-11-2021 createMuiTheme 已弃用有效的新版本：const theme = createTheme({&nbsp; &nbsp; components: {&nbsp; &nbsp; &nbsp; &nbsp; MuiTypography: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; styleOverrides: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; root: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; wordWrap: "break-word"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; MuiCard: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; styleOverrides: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; root: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: "auto",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; },});