JavaScript

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:

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.

Answer

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:

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

Advertisement

Answer