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

Tags: , , , ,

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 (
        <CssBaseline />
        <Container fixed>
          <Typography variant="h1" component="h2" align="center">
            123 456 789 qwertyuiopasdfghjklzxcvbnm

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.



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

wordWrap: "break-word"

Ref: QA: wrap long string without any blank


  style={{ wordWrap: "break-word" }}
  123 456 789 qwertyuiopasdfghjklzxcvbnmdfsafasfasfadfaf

Try it online:
Edit wizardly-noether-n9435

Source: stackoverflow