Wrapping text

The Typography components that you use to render text in your application need to be aware of scenarios where text wraps. This means that, when there isn't enough horizontal space to render a line of text, it continues onto the next line. This can have undesirable layout consequences if you don't anticipate how text might wrap.

How to do it...

Let's look at an example where you have two Paper components that render text using Typography components:

import React, { Fragment } from 'react';
import clsx from 'clsx';

import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core...