User Interface
Handling Overflowing Text

Handling Overflowing Text

Problem

You have a text that is too long to fit in a container and you want to handle it in a way that it doesn't overflow the container.

Solution

You can use the noWrap property to prevent the text from overflowing the container. This will make the text wrap to the next line if it's too long to fit in the container.

import React from "react";
 
import { Typography } from "@material-ui/core";
 
function App() {
  return (
    <>
      <Typography noWrap>
        This is a very long text that will not overflow the container. It'll
        automatically use ellipsis to indicate that the text is too long to fit
        in the container.
      </Typography>
      {/* Example to allow the text to wrap a given number of lines */}
      <Typography
        noWrap
        style={{
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitLineClamp: 2,
          WebkitBoxOrient: "vertical",
        }}
      >
        This is a very long text that will not overflow the container. It'll
        automatically use ellipsis to indicate that the text is too long to fit
        in the container.
      </Typography>
      {/* Rendering a paragraph with a fixed width */}
      <Typography
        noWrap
        paragraph
        style={{
          width: "200px",
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        This is a very long text that will not overflow the container. It'll
        automatically use ellipsis to indicate that the text is too long to fit
        in the container.
      </Typography>
    </>
  );
}

References

Empty StatesLoading State Handling