React - Material UI Typography how to break long string to multiple lines

user_5830331 0
Viewed 22954

I'm using ReactJS and the components library called MaterialUI. I'm having an issue with the Typography component.

What happens is that if I write a long text it exceed its container and doesn't go on a new line:

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);

below an image:

enter image description here

This happens in the mobile mode and also in desktop mode.

Do you know how to fix this behavior? I would like the long words will be split on a new line if the maximum width of the container has been reached.

material-ui reactjs css html javascript
3 Answers

Solution

Use word-wrap, it works for Material-UI's Typography.

wordWrap: "break-word"

Ref: QA: wrap long string without any blank

Demo

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

Try it online:
Edit wizardly-noether-n9435

user_118722460

I came across this and it's a great fix. I ended up adding this in globally to my typography. If you need this then simply add keikai's answer to your createMuiTheme.

//theme.jsx or theme.tsx
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';


let theme = createMuiTheme({
  overrides: { 
    MuiTypography: { 
      root: { 
        wordWrap: "break-word"
      }
   } 
  }
});

export default theme;
user_91733460

Update 24-11-2021 createMuiTheme deprecated new version that work:

const theme = createTheme({
    components: {
        MuiTypography: {
            styleOverrides: {
                root: {
                    wordWrap: "break-word"
                },
            },
        },
        MuiCard: {
            styleOverrides: {
                root: {
                    width: "auto",
                    margin: 10,

                },
            },
        },
    },
});
user_154865390
Related